Как наложить сетку на фоновое изображение?
Всем привет ребят..
Скажите как наложить сетку на фоновое изображение..? Я сделал вот так:
<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. Заранее спасибо ) |
ну неужели никто не знает?(
|
Цитата:
Цитата:
Цитата:
А вообще каков смысл такой сетки ------ ? |
вы меня не поняли.. Мне просто нужно на фон установить картинку , на которой ещё будет наложена сетка.. вот пример..
 вобщем чтобы фон BODY была картинка и + чтобы сетку я мог задать, тоже с помощью картинки. |
Такое http://htmlbook.ru/css/background-image ? В CSS3 пожалуйста, иначе костылями.
|
В данном варианте фон как и сетка являются изображениями..
А то что ты скинул это изображение.. а в случае его отсутствия цвет фона.. Мне же нужно чтобы на "фоновое изображение" а не на цвет, я мог наложить картинку с функцией "repeat" |
Я вроде бы ничего не скидывал, а дал ссылку на css, где описывается как фону можно указать несколько, а не одно изображение. Чего еще надо?
|
В том то и дело, мне нужно найти решение а не библиотеку где надо искать выход.
|
Цитата:
<!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>
|
Вспоминаем про псевдо-элементы:
<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>
|
| Часовой пояс GMT +3, время: 19:50. |