Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

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

Верстаем грамотно, в том числе и под ie6. Задача сверстать страничку с растягивающимся фоном.

1 способ

Способ изпользующий css3 нам не подходит так как он не работает не в одном Internet Explorer кроме 9 версии, так же не совсем корректно в Opera. Простой и прогрессивный метод подходит для людей, которые пользуются исключительно Firefox, Google Chrome, Savari и Opera, и возможно слишком горды, чтобы смотреть в сторону Internet Explorer (хотя при этом пользуются Windows).

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Вопрос: подойдет ли нам css свойство background? Ответ: Нет, нужно запомнить, что background картинка не тянется, а только отображается в пикселях, тем более, если блок без содержимого (пустой).

2 способ

Для растягивающегося нужно использовать html тег <img>.
<img class="fon" src="fon.jpg" width="100%" height="100%" ⁄>

Стили
*{margin:0;padding:0;}
html, body {
width: 100%;
height: 100%;
text-align: left;
}
.fon{
left: 0;
position: absolute;
top: 0;
z-index: -2;
}


Изображение будет тянутся с верхнего - левого угла экрана, z-index:-2 нужен для того чтобы фон лежал под всем остальным содержимым экрана.

Подправляем в ie 6.
К сожалению из-за ошибок в ie6 нужно нужно использовать Jquery (библиотека JavaScript). Кстати можете подключать этот скрипт только для ie6 в условных комментариях, и когда придет время отказаться от ie6, то вам просто нужно будет отключить скрипт.
Вот скрипт кода исправляющий ситуацию в ie6, постоянно меняя размеры фонового рисунка в зависимости от ширины и высоты экрана. Вкратце этот JavaScript узнает параметры ширины и высоты браузера и присваивает их значения <img class=”fon”>.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

function screenSize() {
var w, h; // w - длина, h - высота
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return {w:w, h:h};

}
$(document).ready(function() {
function imageresize() {
var width = $('body').width();
var height = $('body').width();
$('.fon').attr('width',screenSize().w);
$('.fon').attr('height',screenSize().h);
}
imageresize();
$(window).bind("resize", function(){
imageresize();
});
});
</script>

Вопрос: Если у меня много контента и при использовании фоновый рисунок тоже будет перемещаться?

Ответ: Если вы хотите чтобы изображение не просто растягивалось на всю ширину экрана, а и оставалось всегда фиксированным фоном, даже при прокрутке контента, используйте вместо position:absolute – position:fixed.

Вот смотрим рабочий пример.

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В океане мира веб мы чувствуем себя вольготно и можем порой бросить небрежную фразу: «Знаем, плавали». В рубрике «Разбор заплывов» специалисты студии WebАкула делятся не только своими опытом, наблюдениями, выводами, но и практическими советами. На примерах реальных проектов мы окунемся в глубины интригующих вопросов веб-дизайна, интернет-маркетинга и электронной коммерции.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании WebАкула с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)