CSS: растяжение фонового изображения до 100% ширины и высоты экрана?

У меня есть изображение под названием myImage.jpg. Это мой CSS:

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

По какой-то причине, когда я это делаю, ширина myImage растягивается по всему экрану, но высота только растягивается до высоты всего остального на странице. Поэтому, если я поставлю кучу

<br>

на моей странице html, тогда высота увеличится. Если моя HTML-страница состоит только из

<div id='header'>
    <br>
</div>

тогда высота фонового изображения будет просто высотой одного

<br>

Как сделать высоту моего фонового изображения 100% экрана, который пользователь использует для просмотра веб-страницы?

Ответы

Ответ 1

Вам нужно установить высоту html на 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

Ответ 2

Я бы порекомендовал background-size: cover;, если вы не хотите, чтобы ваш фон потерял свои пропорции: JS Fiddle

html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Источник: http://css-tricks.com/perfect-full-page-background-image/

Ответ 3

html, body {
    min-height: 100%;
}

Сделает трюк.

По умолчанию даже html и body имеют только размер содержимого, но не больше, чем ширина/высота окон. Это может привести к довольно странным результатам.

Вы также можете прочитать http://css-tricks.com/perfect-full-page-background-image/

Есть несколько отличных способов добиться очень хорошего и масштабируемого полного фонового изображения.