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 будет центрирован независимо ни от чего.
Вариант №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
Похожие статьи:
05.04.2014
html таблица представляет собой набор строк и столбцов, на пересечении которых имеются ячейки. Обычно такие таблицы используются не только для разметки страниц, но также для создания разметки страниц сайта и его дизайна.
Т.е. изначально выполняется создание html таблицы и только потом ...
16.04.2014
Представим себе, что вам необходим сайт, дизайн которого должен быть достаточно интересен, но, увы, в данный момент вы не имеете ни средств, ни времени, чтобы обратиться к профессионалам для заказа подобного сайта. Самое верное решение в данном случае - использование шаблонов. Они существуют в ...
25.11.2013
Все чаще различные компании стали переносить свой основной бизнес в Интернет, где они занимаются привлечением потенциальных клиентов. Подобные сайты ведут между собой жесткую конкуренцию. Поэтому важно при разработке сайта учесть тот момент, чтобы сайт был не только информативным, но и максимально ...
02.12.2013
Размещая в Интернете сайт-портфолио, люди рекламируют собственные услуги. Обычно таким способом ищут себе клиентов дизайнеры, художники, писатели, фотографы. Важно построить свой проект так, чтобы целевая аудитория захотела сотрудничать с автором.
Сайт-портфолио должен состоять из следующих ...
03.09.2013
Чтобы просмотреть Интернет-сайты, пользуются специально созданными для этого программами – браузерами. Сегодня количество таких программ достигает нескольких десятков, учитывая, что в каждой из них есть несколько версий.
В результате возникло такое понятие как кроссбраузерность. Под ...