Главная » Статьи » Web-кодинг » CSS

Как зафиксировать и растянуть фон на всю ширину окна браузера?

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

А именно:

  • изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
  • должно, по возможности, сохранять пропорции (соотношение сторон);
  • изображение НЕ должно вызывать скроллинга (полос прокрутки);

Изменение фонового изображения страницы с помощью CSS3-свойства «background-size»

С приходом CSS3 появилось такое свойство, как «background-size», непосредственно отвечающее за масштабирование фона. Многие современные браузеры стремятся соответствовать стандарту W3C и уже поддерживают это свойство.

К ним относится: Opera 9.5 и выше, Firefox 4 и выше,Safari 3 и выше, Chrome 4 и выше, Konqueror 3.5.4, и, как ни странно, лидер неподдержки стандартов - Internet Explorer 9.

Все они уже поддерживают CSS3 свойство «background-size», но, как и обычно, коряво, и для разных браузеров, по своему: через -moz-background-size для Мозиллы; -o-background-size для Opera; -webkit-background-size для Safari, Chrome, и -khtml-background-size для Konqueror (WebKit-браузеров), соответственно. ヅ ...

Как и было упомянуто выше, с приходом CSS3, а именно свойства «background-size», сделать это достаточно просто.

Допустимые значения cвойства background-size:

  • «величина» - ширина и высота фонового изображения в прямом виде;
  • «процент» - ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента;
  • contain - изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения;
  • cover - изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения;
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.

HTML-код:


CSS-стили:

Code (CSS)
<style type="text/css">
/*StartStyle*/
html,body{background-color:transparent;}
html{background:transparent url(_st/fon_v0.jpg) no-repeat center center fixed;
-moz-background-size:cover; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size:102% auto; /* Opera 9.5 */
-webkit-background-size:
102% auto; /* Safari 3.0 */
-khtml-background-size:cover; /* Konqueror 3.5.4 */
background-size:cover; /* CSS3 */
}
/*EndStyle*/
</style>

Где:

html,body{background-color:transparent;} - задаём html и body фоновый цвет - прозрачный - дабы картинка просвечивала.

html{..... no-repeat center center fixed;...} - задаём фоновую картинку Html, фиксируем её по центру, запрещаем повторятся.

html{background-size:cover;} - назначаем CSS3-свойству background-size значение «cover» - масштабировать изображение с сохранением пропорций по max размерам (ширине или высоте - что больше) блока - в данном Html.


 Пример ...


Изменение фона страницы посредством позиционированного изображения

Ещё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: - под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 100% - тем самым, сохраняя пропорциональность при ресайзе.

Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера.

Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1).

Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля.

HTML-код:

Code (HTML)
<img id="imgBg" src="/_content/_ext/img-bg/_st/ff11_3.jpg" alt="" />

- Добавляется после контента, перед закрывающим </body>


CSS-стили:

Code (CSS)
#imgBg{display:block;position:fixed;top:0;left:0;min-height:100%;min-width:1024px;width:100%;height:auto;z-index:-1;}
@media screen and (max-width:1024px){#imgBg{left:50%;margin-left:-512px;}}

 Пример ...


Internet Explorer, как "особо одарённый”, не фиксирует изображение, и требует для себя индивидуальный "костыль”, что и можно сделать,  небольшой хак - для эмуляции  position:fixed. Все это делаем через ... нет, не заднее место, но близко к тому ヅ, а используя conditional comments, то бишь - пишем стили только для эксплореров, в данном случае - версии менее v7.

HTML-код: (для шестого ИЕ - в условных комментариях)

Code (HTML)
<!--[if lte IE 7]><img id="pageImg" src="/_content/_ext/img-bg/_st/fon_v0.jpg" width="100%" alt="" /></div><![endif]-->

CSS-стили: (сам хак)

Code (CSS)
<!--[if lte IE 7]><style type="text/css">
body{background:url(about:blank);background-attachment:fixed;}
#imgBg{top:0;left:0;width:100%;height:100%;position:absolute;top: expression(document.getElementsByTagName("body")[0].scrollTop+"px");}
</style><![endif]-->

Где:

body{background:url(about:blank);background-attachment:fixed;} - убираем подрагивание страницы при скроллинге..

Источник этого решения, судя по всему, студия Лебедева.

 Пример ...

Примечание:

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


Автор: Likbezz aka Flesh




Источник: как, background, css, что, html, size, jquery, для, изображение, это, страницы, мои, изображения, cover
Категория: CSS | Добавил: likbezz (15.03.2011)
Просмотров: 69016 | Комментарии: 5 | Теги: зависимости, FIXED, фон, изменение, разрешения, background-size, CSS3, резиновый, @media screen
Всего комментариев: 5
0  
5  alexandr   [06.09.2013]

А в wordpress - е как растянуть фон?

0  
4  Pomogite_ya_nedogonyaiy   [26.04.2013]

если вам не трудно, дайте пару ссылок таких сайтов ! заранее спс !

0  
3  WOLFsergey   [24.07.2012]

Согласен..спасибо!

0  
2  bandjuk   [09.04.2012]

Спасибо! Полезная статья! smile

0  
1  Мила   [24.01.2012]

SOS!!!С моим ящиком что-то произошло и настройки страницы постоянно сбиваются на мелкий шрифт! Помогите, пожалуйста, что надо сделать, чтобы вернуть?

Ответ:

Вопросы подобного характера в тему: Если вы пришли за помощью, то Вам сюда...

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]