CSS background-size свойство

Я хочу добавить полноразмерный фон на мой сайт, желательно только с использованием свойств CSS background а также background-size, В настоящее время я использую следующее

.bg {
  background: url("./gfxGeneral/backgroundImage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

А потом <body class="bg"> применить это. Проблема в том, что если окно становится очень узким, фоновое изображение в стиле ландшафта, которое я использую, покрывает только небольшую часть, поскольку оно масштабируется до 100% ширины. Можно ли как-нибудь заставить его использовать либо 100% ширину, либо 100% высоту так, чтобы никогда не оставлять белый фон? Я нашел несколько руководств для этого, но все они содержат довольно "некрасивый" код.

Запрос бонуса: желательно использовать код, который поддерживает старые браузеры, такие как IE9

Источник

3 ответа

Решение

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

Если body размер не полный размер окна, вы можете попробовать использовать JavaScript (я использую фреймворк jQuery):

<script>
$(document).ready(function() {
    // Call the function at the beginning, in case the window is already too small, 
    onResize();

    $(window).resize(function() {
        onResize();
    });

    function onResize() {
        // Note: 16 / 9 is the resolution of the background image
        // Change appropriately
        if ($(window).width() / $(window).height() < 16 / 9) {
            $(".bg").css("background-size", "auto " + $(window).height() + "px");
        }
        else {
            $(".bg").css("background-size", "cover");
        }
    }
});
</script>

Смотрите это JFiddle

Надеюсь это поможет!

Источник

Вместо использования javascript, вы можете использовать CSS "min-height" и "vh", чтобы заставить элемент body быть как минимум таким же высоким, как и область просмотра:

http://jsfiddle.net/s9ggm2u1/5/

body.bg {
    background[...]

    min-height: 100vh;
    margin:0px;
}

Поддержка браузеров для vh unit: http://caniuse.com/

Источник

Попробуйте это с помощью CSS:

.bg {
  background: url("./gfxGeneral/backgroundImage.jpg");
  background-size: 100% 100%;             //x% y%, first is width and second is height
  background-repeat: no-repeat;
}

Надеюсь, это работает.

Источник
Другие вопросы по тегам