У меня этот HTML. Со следующим:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Фоновое изображение к этому контенту CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
Эта структура работает нормально. Но я хочу прикрепить эти фоновые изображения к размеру тела и полного экрана. Как я могу сделать это с помощью JavaScript или чистого jQuery (без плагина)?
Попробуйте под кодом...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Используйте этот CSS:
background-size: cover;
Вы имеете в виду изображение, которое связано с контекстом тела, а не с.item?
Вы можете использовать положение: исправлено для этого. Верхняя, левая, нижняя и правая стороны гарантируют, что она займет всю страницу.
background-size: обложка будет гарантировать, что изображение само покроет страницу. В зависимости от используемого изображения вам может понадобиться другое решение. Например: вы можете центрировать изображение и исчезать до цвета фона (но это зависит от вас)
Используйте z-указатель -1, чтобы убедиться, что он не скрывает ваш контент.
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Сценарий: http://jsfiddle.net/Aa8fe/
Даже я боролся за то же самое и продолжаю, я получил решение... ниже.
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}