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

Но знаете ли Вы, что если Вам не нужно поддерживать очень старые версии браузеров, такие как Internet Explorer версии 8 и ниже, то можно создать этот замечательный эффект с помощью строки кода CSS? И сейчас мы расскажем, как именно это можно сделать.

Демонстрация работы – Скачать исходный код 

Свойство размера фона 

С помощью свойства размера фона можно задать элементу, какого размера должно быть его фоновое изображение. Для этого используется следующая запись:

#elem{
    background:url('kermit.jpg') center center no-repeat;
    background-size:100px 150px;
}

Но что еще более удобно, это свойство поддерживает два волшебных значения — contain и cover:

• Значение contain (содержать) меняет размер фонового изображения так, чтобы оно полностью поместилось в элемент;
• Значение cover (накрывать) более интересно — оно делает так, чтобы весь фон элемента был накрыт изображением. Размер изображения меняется на наименьшей, позволяющий накрыть элемент полностью. Посмотрите на пример ниже. Это значение будет использовано для полноэкранного фонового изображения.

Значения размера фона contain и cover

Так что все, что нам нужно сделать, — задать изображение, которое мы хотим показывать на полный экран, фоновым изображением элемента html:

html{
        /* Это изображение будет выводиться на полный экран */
        background:url('background.jpg') no-repeat center center;

        /* Чтобы гарантировать, что элемент html всегда будет полной высоты окна браузера */
        min-height:100%;

        /* Волшебство */
        background-size:cover;
}
body{
        /* Обходной путь для некоторых мобильных браузеров */
        min-height:100%;
}

И теперь изображение выводится на полный экран. Оно будет меняться в размерах при изменении размера окна или ориентации мобильного устройства. Это свойство поддерживается всеми современными и многими устаревшими версиями браузеров, как настольных, так и мобильных, даже таких, как Internet Explorer, начиная от версии 9.

Благодарим Zanthia за замечательное изображение.

Автор урока Martin Angelov

Перевод — Дежурка

Смотрите также:

• Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения
• Создание улучшенных фонов с помощью режима наложения
• Использование свойства CSS тени блока