Разделы

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

Метки:

фон

В отличие от обычной картинки, добавляемой через тег <IMG>, фоновый рисунок напрямую никак не получится растянуть. Но можно пойти на хитрость и расположить картинку в качестве нижнего слоя, а остальное содержимое веб-страницы поместить поверх него.

Для этого создаем с помощью тега <DIV> два слоя, назовем их layer1 и layer2 и определим их порядок через стилевой атрибут z-index. Чем больше значение этого параметра, тем выше располагается текущий слой относительно других слоев. Также необходимо задать абсолютное позиционирование для каждого слоя (пример 1).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Растягиваемый фон</title>
  <style type="text/css">
   #layer1 {
    z-index: 1; /* Порядок слоев */
    width: 100%; /* Ширина слоя с фоном */
    height: 100%; /* Высота слоя с фоном */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края окна */
    top: 0; /* Положение от верхнего края */
   }
   #layer2 {
    position: absolute; /* Абсолютное позиционирование */
    z-index: 2; /* Порядок слоев */
   }
  </style>
 </head>
 <body>
  <div id="layer1">
    <img src="help.gif" width="100%" alt="">
  </div>
  <div id="layer2">
    Основное содержимое веб-страницы
  </div>
 </body>
</html>

Для слоя layer1 требуется установить ширину и высоту равную 100% и координаты левого верхнего угла задать нулевыми. Тогда не возникнет горизонтальной полосы прокрутки. Обратите внимание, что в самом теге <IMG> указана только ширина изображение без высоты. Это сделано для того, чтобы сохранить пропорции картинки, в противном случае в браузере Opera возникнут искажения.

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

Рис. 1

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

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

Рис. 2

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

Гость, 13.10.2008

Здравствуйте!
Скажите, пожалуйста, как растянуть фон так, чтобы всё содержимое страницы было на этом фоне.
Я в отдельный файл помещаю стили:
#layer1 {
z-index: 1;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#layer2 {
position: absolute;
z-index: 2;
}
в HTML-документе:
<div id="layer1">
<img src="fon2.gif" width="100%" alt="">
</div>
<div id="layer2"> далее описание содеожимого

Гость, 16.11.2008

#layer1 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}

#layer2 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}

Здесь чуток исправлено и добавлено для слоя #layer2 в стиле. если использовать так как написано в примере - то будет сдвиг второго слоя. Этот сдвиг видимо появляется из-за того что неуказанные параметры top,left,widgh,height устанавливаются по умолчанию.

Natali, 19.01.2009

Спасибо большое! Как раз то что искала)

Гость, 12.02.2009

Интересно конечно, но если я пишу таблицу вместо обычного текста и ее после ставлю по центру как по горизонтали, так и по вертикали, то она(таблица) все равно липнит к левому краю...

Нашел в чем проблема - left: 0; /* Положение от левого края окна */
Если аналогичную запись добавить в layer2, только равным к примеру 5%, соблюдение равного расстояния с права и лева нет. :-(

Гость, 12.02.2009

Огромное спасибо!
Для того что бы все работало, layer2 должен быть таким:
#layer2
{
position: absolute;
z-index: 2;
width: 100%;
}

Саша, 16.03.2009

УРА!!!!!!!!!!У меня получилось!!!!!Спасибо Вам огромное! Я уже отчаялась найти хоть какое-либо решение, но тут обнаружила Вашу страничку.Теперь все работает как надо!!!!!!!!!!!!!!!!;))))))))))))))))))))

Виталий Башилов, 20.03.2009

спасибо огромное!!! всё получилось!!!

AraTaurus, 22.03.2009

У мнея наоборот картинка слишком большая, я хочу чтобы на всех мониках отображалась одинаково. Вот нуна ее типа растянуть по экрану но в то-же время уменьшить вот css файл:
@charset "utf-8";

body {
margin: 0;
padding: 0;
font-size: 100.01%;
font-family: Verdana, Arial, sans-serif;
color: #9D533C;
background-color:#000000;
/*background-image:url(../images/bg.jpg);*/
background-position:center;
text-align:center;
/* min-width:100%;
height:100%;*/
}

h1, h2, h3, h4, h5, h6, p, form {
margin: 0;
padding: 0;
}

img {
border: none;
}

ul, ol, li {
padding: 0;
margin: 0;
list-style: none;
}

.clearMe {
clear: both;
line-height:0px;
}
form {
display:inline;
}

.invisible { display: none;}

Slawa, 01.06.2009

Здравствуйте!
Подскажите как растянуть фоновую картинку так, что бы она не размножалась вертикальной полосой справа и горизонтальной снизу.
Сейчас у меня так.
body{
background: url('адрес картинки');background-attachment:fixed;}

Максим, 12.08.2009

2Slawa, 01.06.2009 background-repeat:no-repeat; добавь и все! А за CSS по фону спасибо!

Андрей, 19.09.2009

Если все правильно понял, то background-repeat: no-repeat;

Разделы

Термины

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

Отправить комментарий