Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как наложить сетку на фоновое изображение? (https://javascript.ru/forum/xhtml-html-css/56658-kak-nalozhit-setku-na-fonovoe-izobrazhenie.html)

Georka 27.06.2015 14:19
Как наложить сетку на фоновое изображение?
 
Всем привет ребят..

Скажите как наложить сетку на фоновое изображение..?

Я сделал вот так:
<html>
<head>
<style type="text/css">
body.bg {
    background-color: #418BCA;
    background-repeat: no-repeat;
    background-position: relative;
    background-size: cover; }
  body.setka {
    background-image: url(http://r-g.esy.es/templates/web/images/noise.png);
    background-repeat: repeat;
    background-position: relative;
    background-size: 2px 2px; }
</style>
</head>

<body class="bg setka">
--------------------------------------------------<br>
--------------------------------------------------<br>
--------------------------------------------------<br>
--------------------------------------------------<br>
--------------------------------------------------<br>
--------------------------------------------------<br>
</body>
</html>


Но в данном случае сетка накладывается на фоновый цвет.
А мне нужно наложить его на изображение..

Ах да. И чтобы Изображение было на всю ширину и высоту окна.. А сетка со свойством repeat. Заранее спасибо )

Georka 27.06.2015 22:18
ну неужели никто не знает?(

laimas 28.06.2015 01:13
Цитата:
Сообщение от Georka
Но в данном случае сетка накладывается на фоновый цвет.
В данном случае наложение на фон, которым является background-image. И в чем проблема?

Цитата:
Сообщение от Georka
Ах да. И чтобы Изображение было на всю ширину и высоту окна..
А стилями что определено? Оно и размножается на всю клиентскую область. И в чем проблема?

Цитата:
Сообщение от Georka
А сетка со свойством repeat.
Это каким образом? Нет у текста такого стиля repeat, можно в CSS3 что-то сделать используя columns.

А вообще каков смысл такой сетки ------ ?

Georka 28.06.2015 01:23
вы меня не поняли.. Мне просто нужно на фон установить картинку , на которой ещё будет наложена сетка.. вот пример..



вобщем чтобы фон BODY была картинка и + чтобы сетку я мог задать, тоже с помощью картинки.

laimas 28.06.2015 01:41
Такое http://htmlbook.ru/css/background-image ? В CSS3 пожалуйста, иначе костылями.

Georka 28.06.2015 03:29
В данном варианте фон как и сетка являются изображениями..
А то что ты скинул это изображение.. а в случае его отсутствия цвет фона..

Мне же нужно чтобы на "фоновое изображение" а не на цвет, я мог наложить картинку с функцией "repeat"

laimas 28.06.2015 03:34
Я вроде бы ничего не скидывал, а дал ссылку на css, где описывается как фону можно указать несколько, а не одно изображение. Чего еще надо?

Georka 28.06.2015 21:33
В том то и дело, мне нужно найти решение а не библиотеку где надо искать выход.

Malleys 28.06.2015 23:10
Цитата:
Сообщение от Georka
Скажите как наложить сетку(как понял, повторяется) на фоновое изображение(как понял, не повторяется)?
 
<!doctype html>
<html>
  <head>
    <style>
    
    html {
      background-color: #418BCA;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("http://r-g.esy.es/templates/web/images/backgrounds/1.jpg");
      height: 100%;
    }
      
    
    body {
      background-color: transparent;
      background-repeat: repeat;
      background-size: 5px;
      background-image: url("http://r-g.esy.es/templates/web/images/noise.png");
      height: 100%;
      margin: 0;
    }
    
    </style>
  </head>
  <body></body>
</html>

devote 28.06.2015 23:56
Вспоминаем про псевдо-элементы:
<html>
<head>
<style type="text/css">
  .bg {
    position: relative;
    background-image: url("http://bonurtek.com/wp-content/uploads/2014/05/gradient-wallpaper-1.jpg");
    background-size: cover;
    margin: 0;
  }
  .setka:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://r-g.esy.es/templates/web/images/noise.png);
    background-size: 2px 2px;
    z-index: -1;
  }
</style>
</head>
 
<body class="bg setka">
  <div>
    --------------------------------------------------<br>
    --------------------------------------------------<br>
    --------------------------------------------------<br>
    --------------------------------------------------<br>
    --------------------------------------------------<br>
    --------------------------------------------------<br>
  </div>
</body>
</html>

laimas 29.06.2015 00:02
Цитата:
Сообщение от Georka
В том то и дело, мне нужно найти решение а не библиотеку где надо искать выход.
Какая еще библиотека, это CSS, просто прочесть надо.

Georka 29.06.2015 02:00
Аминьь Хвала небесам.. красава devote !!! спасибо

Malleys 29.06.2015 02:04 
<!doctype html>
<html>
  <head>
    <style>
    
    :root {
      background-color: #418BCA;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("http://bonurtek.com/wp-content/uploads/2014/05/gradient-wallpaper-1.jpg");
      height: 100%;
    }
      
    
    :root :nth-child(2):before {
      background-size: 2px;
      background-image: url("http://r-g.esy.es/templates/web/images/noise.png");
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
    }
    
    </style>
  </head>
  <body></body>
</html>

Или же только псевдо-элементы


Часовой пояс GMT +3, время: 09:21.