jQuery, CSS: растягиваем background

Наверняка вы уже использовали CSS стили и jQuary для произведения различных манипуляций над своим сайтом. Цель данной статьи - рассказать о том, как реализуется фоновое изображение (background) на сайте, которое полностью покроет всю рабочую часть браузерного окошка. Сделаем мы это, используя такие техники, как jQuery, CSS.

Как растянуть background на jQuery, CSS

Растянуть background на css

Итак, для начала нужно определиться с тем, что мы желаем увидеть в результате:

• полную заливку окошка браузера изображением, без пробелов;
• фоновое изображение должно растягиваться, когда это необходимо;
• пропорции изображения должны соответствовать;
• местонахождение изображения - центр;
• максимальная кроссбраузерность;
• никаких flash-махинаций.

Итак, приступим!

CSS background

Для того, чтобы с помощью чистого кода CSS растянуть background на весь экран, вы можете использовать два варианта (впрочем, наверняка имеются и другие).

Вариант №1

В данном случае будет использоваться такой элемент, как img. Его необходимо растянуть на все браузерное окошко, и он будет одинаково выглядеть в каждом браузере. Нужно установить min-height, заполняющий браузерное окошко вертикально, и width выставить 100% - это будет горизонтальное заполнение. Также нам понадобится установка min-width картинки, чтобы фон не становился меньше установленного нами.

Наиболее хитрой частью кода является та, где использован медиа запрос, предотвращающий баг в том случае, если браузерное окно окажется меньше, чем наше фоновое изображение. И еще момент комбинированного использования отступа с процентным значением left. Таким образом, background будет центрирован независимо ни от чего.

 CSS код представлен ниже:

Вариант №2

Следующий простой способ - вставка изображения на страничку.

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

Присваиваем изображению min-width и min-height в 100%. Ну и картинка должна быть заранее подготовлена (имеется в виду пропорциональность сторон).

Растягиваем background, используя jQuery

CSS метод является альтернативным по сути. А вот идея с jQuery появилась несколько раньше. Зная пропорции изображения и его размеры, у нас есть возможность растягивания background на CSS.

В том случае, когда изображение меньше, чем браузерное окно, нужно изменить width для изображения на 100%. Когда, наоборот, изображение больше, мы лишь устанавливаем height 100% и знаем, что изображение будет заполнять пространство, как в ширину, так и в высоту.

Получение доступа к нужной информации происходит с использованием JavaScript и, собственно, jQuery Фреймворка.

Центрирования в данном коде нет, но сделать его самостоятельно не составит труда.

На этом все!

Мы рассмотрели jQuery, CSS техники для того, чтобы осуществить растягивание background на весь экран. Также это можно сделать и при помощи php, и используя css3. Возможно, вы попробуете заняться этим самостоятельно. В любом случае, творческих вам успехов!

Видео: Уроки по CSS/CSS3. Часть 10. Фон и множественные фоны

04.04.2014