Как зафиксировать и растянуть фон на всю ширину окна браузера?
Хотел бы ещё затронуть такую тему, как фоновое изображение страницы, и динамическое изменение его параметров, в зависимости от разрешения экрана пользователя.
А именно:
- изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
- должно, по возможности, сохранять пропорции (соотношение сторон);
- изображение НЕ должно вызывать скроллинга (полос прокрутки);
Изменение фонового изображения страницы с помощью 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-стили:
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-код:
- Добавляется после контента, перед закрывающим
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-код: (для шестого ИЕ - в условных комментариях)
CSS-стили: (сам хак)
body{background:url(about:blank);background-attachment:fixed;} - убираем подрагивание страницы при скроллинге..
☑ Пример ...
Примечание:
Нужно понимать, что масштабирование большого изображения, тем более зафиксированного неподвижным фоном, снижается производительность браузера.
Кроме того, чтобы не терялось качество при больших разрешениях экрана, изображение лучше использовать с максимальными размерами, а такие картинки могут весить очень много.
...