Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).

Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, - «Будет работать даже с отключенным Javascript».

Решение: как растянуть фон CSS средствами

У свойства background-size может быть несколько значений.
1) это может быть одна из дирректив: cover или contain.

Background-size: contain; /* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */ background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */

2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).

Background-size: 100%; /*Равносильное директиве cover*/ background-size: 100% 50%; /*Ширина будет на 100% ширины блока, а вот высота - только на 50%, картинка скорее всего будет деформирована*/

3) прямо численное значение (в пискелях, сантиметрах, em и т.д.). Параметров также может быть 2 (или 1), как и в предыдущем случае.
4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:

Background-size: 60% auto; /*ширина картинки будет 60%, а высота пропорциональна размерам исходной картинки*/

Где будет работать решение растянуть фон CSS?

Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости:

Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку css на весь экран?» На самом деле такой прием очень просто реализовывается, но тут дело в другом.

На сегодняшний день существует множество способов и языков программирования, благодаря которым изображение может размещаться на целый экран. Поэтому в данной публикации я расскажу о нескольких способах создания полноразмерного фонового изображения при помощи css, css3, jquery и php. Приступим к делу!

Способ 1. Адаптивная фоновая картинка css-средствами

Для того чтобы сделать фоновое изображение адаптивным, в каскадных стилевых таблицах предусмотрено свойство background- size . Оно позволяет установить размер графического файла по отношению к размерности открытой вкладки .

Для этого нужно всего лишь написат вот такую строку:

background- size: 100% auto

Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.

Пример с css body { background: url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) no-repeat center top fixed; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; color:#191970; } div { background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; } h1 { color: #191970; text-shadow: 3px 2px 1px #fff; }

Такой способ поддерживают браузеры, начиная с 10 версии , 3 версии Safari, Firefox 3.6 и 9 версии IE.

Способ 2. Резиновый фон при помощи css3

С выходом в мир спецификации css3 в язык добавилось много удобных инструментов. Так, для создания растянутого фона в виде изображения используется то же свойство, что и в предыдущей главе, однако размер изображения задается не процентами, а специальным словом cover: background- size: cover . Очень удобно, не правда ли?

Чтобы посмотреть, как работает данное свойство, запустите прошлый пример, изменив в параметры background-size 100% и auto на cover .

Сам по себе jQuery очень удобен. С ним проще работать с API, легче получать доступ к различным элементам кода, а также проще реализовывать некоторые вещи.

Для того чтобы в примере заработал данный способ, нужно вначале подключить скрипт js вот такой строкой:

Ниже я прикрепил программный код примера с уже вставленной в него реализацией jQuery.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Пример с jQuery < aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Планетарий на открытой местности! Познайте далекие звезды, планеты и кратеры луны...

Пример с jQuery body { background-size: cover; color:#191970; } div { background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; } h1 { color: #191970; text-shadow: 3px 2px 1px #fff; } #b-g { top: 0; left: 0; z-index:-1; position: fixed; } .b-g-w { width: 100%; } .b-g-h { height: 100%; } $(window).load(function() { var wind = $(window), $b-g = $("#b-g"), aspectRatio = $b-g.width() / $b-g.height(); function resizeBg() { if ((wind.width() / wind.height()) < aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Планетарий на открытой местности!

Познайте далекие звезды, планеты и кратеры луны...

Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.

Способ 4. Php-реализация растянутого на весь экран изображения

Несколько слов о самом языке. Php принято называть языком сценариев. С его помощью пишут серверную часть веб-приложений, т.е. связывают сервис с базой данных, обрабатывают запросы и т.д. Сам код php внедряется в html и гибко взаимодействует с ним.

Чтобы вставить кусок кода, нужно прописать текст в вот таких скобках:

А теперь в первоначальный пример вам нужно вставить всего лишь несколько строк:

1 2 3 4 5

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.

Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас из оригинального изображения:

Должно получиться вот что:

Приступим. Открываем наше изображение в PhotoShop и выделяем необходимый нам объект:

Далее переходим на вкладку Выделение >> Сохранить выделенную область

И задаем какое-нибудь произвольное имя для данного выделения:

Таким образом, мы создали область, которая в последствии будет защищена от изменений. Следующим шагом переходим в Редактирование >> Масштаб с учетом содержимого :

И обязательно указываем защищаемый объект:

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

Задача

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Растягиваемый фон body { background: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ }

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.

Техника с использованием только CSS. Часть #1.

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

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

Вот код CSS:

Img.bg { /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в:

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

IE 9: Работает.

Техника с использованием только CSS. Часть #2.

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

#bg { position:fixed; top:0; left:0; /* Сохраняем коэффициент пропорциональности */ min-width:100%; min-height:100%; }

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

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Работает в:

Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

IE 8+.

Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Работает в:

IE7+ (с заглушками, вероятно, будет работать и в IE6)

Во всех остальных браузерах.

Заключение

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