Форум

Georka · #1 (**permalink**) 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 · #2 (**permalink**) 27.06.2015, 22:18

ну неужели никто не знает?(

laimas · #3 (**permalink**) 28.06.2015, 01:13

Сообщение от Georka

Но в данном случае сетка накладывается на фоновый цвет.

В данном случае наложение на фон, которым является background-image. И в чем проблема?

Сообщение от Georka

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

А стилями что определено? Оно и размножается на всю клиентскую область. И в чем проблема?

Сообщение от Georka

А сетка со свойством repeat.

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

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

Georka · #4 (**permalink**) 28.06.2015, 01:23

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

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

laimas · #5 (**permalink**) 28.06.2015, 01:41

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

Georka · #6 (**permalink**) 28.06.2015, 03:29

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

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

laimas · #7 (**permalink**) 28.06.2015, 03:34

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

Georka · #8 (**permalink**) 28.06.2015, 21:33

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

Malleys · #9 (**permalink**) 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 · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript