CSS: Создание масштабируемого фона для сайта

|

8 Авг 2012

|

Оставить комментарий

Приветствую! В этом коротком уроке я покажу Вам, как просто можно создать масштабируемый фон для сайта. Такая возможность появилась в CSS3, так что в браузерах, не поддерживающих CSS3 (такие еще используются?), этот метод работать не будет

Итак, нам нужно большое изображение, которое будем использовать в качестве фона. Я использовал это.

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


html {
 min-height: 100%;
 background-size: cover; /*Значение cover масштабирует изображение, в зависимости от размеров блока*/
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
background-position: right bottom; /*Изображение будет обрезано, в зависимости от значений*/
}

body{
 min-height:100%;
}

Как Вы поняли, главное свойство — это background-size, которое появилось в CSS3 и задает размер фонового изображения. Помимо значений в пикселях и процентах оно может принимать значения:

auto — Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover — Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain — Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Демо