CSS3 background-size - могу ли я гарантировать покрытие? - PullRequest
Новая
       0

CSS3 background-size - могу ли я гарантировать покрытие?

4 голосов
/ 21 ноября 2011

У меня есть веб-сайт, который использует изображение в качестве фона на всей странице.Чтобы сделать это, я использую новую спецификацию CSS3 "background-size", которая установлена ​​на "cover".

background-image: url(/images/House-Remodel-Ideas2.jpg);
background-repeat: no-repeat;
background-size: cover;

В общем, это работает хорошо, но я заметил, что если окно начинает становиться слишком узким (и это довольно широкое изображение, поэтому даже 1024x768 "слишком узкое"), то изображение перестает заполнятьстраницы, и вместо этого я вижу цвет фона страницы.

Этот вид разрушает внешний вид страницы.Хотя я предполагаю, что могу проявить творческий подход как к размеру изображения, так и к общему дизайну страницы, было бы неплохо, если бы это сработало так, как ожидалось.У меня все в порядке с растеканием или обрезкой изображения, но я не согласен с тем, что оно слишком маленькое и оставляет фон страницы видимым.

Есть ли способ настроить это так, чтобы это неслучилось?

Был запрошен пример, так что ... вот изображение, которое я использую: http://i.imgur.com/igLMC.jpg

А вот HTML: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background-image: url(house.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red;
}
</style>
</head>
<body>
</body>
</html>

Я поставил неприятный красный фон позади изображения, чтобы продемонстрировать проблему.Если он работает правильно, вы не должны видеть красный.Так что запустите выше, а затем измените размер браузера, чтобы он был очень тонким и высоким.Вы увидите много красного под картинкой.В этом проблема.

В качестве обновления после дополнительного тестирования удаление DOCTYPE, похоже, решает проблему.Я не достаточно умен, чтобы сказать вам, почему.:)

Ответы [ 2 ]

4 голосов
/ 22 ноября 2011

Я не реализовал css-only способ сделать это, но я однажды использовал плагин backstretch jQuery, и он работал по всем направлениям. http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/

0 голосов
/ 10 сентября 2017

Просто установите height или min-height из html: 

html {
  min-height: 100%;
}
body {
    background-image: url(http://i.imgur.com/igLMC.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: red
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
...