Вопрос по background-image, css, html – CSS: растянуть фоновое изображение до 100% ширины и высоты экрана?

46

У меня есть изображение под названием 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% экрана, который пользователь использует для просмотра веб-страницы?

Ваш Ответ

4   ответа
3

также называемой окном браузера.(height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}
да. Благодарю . отредактированный Mostafa Norzade
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа. A. Suliman
97

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

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

http://jsfiddle.net/8XUjP/

48

Я бы посоветовал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/

Это должен быть правильный ответ. Я даже не думал, что новая «обложка» - это значение фона. Emanuele Ciriachi
5
html, body {
    min-height: 100%;
}

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

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

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

Ты имел ввидуmin-height? Вопрос заключается в высоте, а не в ширине. ajp15243
Конечно, извините - поменял. Kjeld Schmidt

Похожие вопросы