Как растянуть фоновое изображение содержимого на весь экран?

Question

Как растянуть фоновое изображение содержимого на весь экран?

0

У меня этот 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 (без плагина)?

Dokuz Tane On 26 сен. 2013, в 15:10

Источник

Теги:

javascript

jquery

4 ответа

Ещё вопросы

Kailash Ahirwar · Answer 1 · 2013-09-26T10-15-00.000Z

Попробуйте под кодом...

 #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;
 }

background-size: охватывать только полный экран в этом классе предметов. Но я хочу, чтобы весь экран был в полном изображении.
установите ширину и высоту #container на 100%, и это работает как шарм! Спасибо!

fred02138 · Answer 2 · 2013-09-26T11-43-00.000Z

0

Используйте этот CSS:

background-size: cover;

fred02138 26 сен. 2013, в 11:43

0

Ссылка: w3schools.com/cssref/css3_pr_background-size.asp
fred02138 26 сен. 2013, в 13:04
0

background-size: охватывать только полный экран в этом классе предметов. Но я хочу, чтобы весь экран был в полном изображении
Dokuz Tane On 26 сен. 2013, в 13:05
0

@DokuzTaneOn попробуйте background-size: 100% 100%;
fred02138 26 сен. 2013, в 13:16

Показать ещё 1 комментарий

hvgeertruy · Answer 3 · 2013-09-26T11-23-00.000Z

Вы имеете в виду изображение, которое связано с контекстом тела, а не с.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/

Sasidharan · Answer 4 · 2013-09-26T10-40-00.000Z

Даже я боролся за то же самое и продолжаю, я получил решение... ниже.

    body //your container name
    {
        background-image: url(Images/caramel%20gradient%20for%20website.png);
        background-size: 100%;
    }

background-size: охватывать только полный экран в этом классе предметов. Но я хочу, чтобы весь экран был в полном изображении
Я понимаю, вы имеете в виду одно изображение, которое должно быть растянуто до размера окна.