Озадачился вопросом, как сделать резиновый фон. Дизайнеры, они ведь не всегда знают основных правил верстки, им лишь бы сделать. Сколько макетов теряется при этом... Эх.
Картинка на фоне должна сужаться и растягиваться по мере изменения окна браузера. Каркас из двух колонок. Минимальная ширина 1000px. Это все мы рассмотрим сегодня.
Задаем position absolute и картинке и самому контенту. Затем с помощью z-index помещает фон вниз, а все остальное наверх.
Делаем див, внутри которого будет лежать фоновая картинка.
<div id="fon">
<img src="fon.jpg" alt="" />
</div></div>
<div class="code">#fon{
height:100%;
width:100%;
z-index:1;
min-width:1000px;
max-width:1600px;
}
#fon img{
height:100%;
width:100%;
position:absolute;
}
Теперь див со всем остальным содержимым.
<div id="page">
<div class="sid">
<div class="trans"></div>
<div class="text">
Боковая колонка (sidebar)
</div>
</div>
<div class="note">
<div class="trans"></div>
<div class="text">
Страница (page)
</div>
</div>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li style="border:0 !important;"><a href="#">О компании</a></li>
</ul>
</div>
#page{
position:absolute;
top:0;bottom:0;right:0;left:0;
z-index:100;
}
.note{
border:1px solid #ddd;
margin:2% 7% 0 0px;
width:55%;
float:right;
min-height:500px;
height:auto !important;
height:500px;
position:relative;
}
.trans{
background:#fff;
opacity:0.4;
position:absolute;
height:100%;
width:100%;
}
.text{
position:relative;
padding:10px;
}
.sid{
border:1px solid #ddd;
margin:2% auto 0 7%;
width:23%;
float:left;
position:relative;
min-height:500px;
height:auto !important;
height:500px;
}
ul#menu{
position:absolute;
bottom:5%;
left:10%;
font-size:px;
}
#menu li{
float:left;
list-style:none;
width:200px;
text-align:center;
border-right:1px solid #333;
}
#menu li a{
text-decoration:none;
color:#fff;
border-bottom:1px dashed transparent;
}
#menu li a:hover{
text-decoration:none;
color:#fff;
border-bottom:1px dashed #ddd;
}
Вот... Что у нас вышло, можно посмотреть тут: size-fon.html.
Пример не является полностью автоматизированным. Над ним еще нужно поработать... Например, нельзя забывать о больших и маленьких мониторах. Также картинка будет грузится одна, потому вес будет большой.
За картинку спасибо: http://www.htmllancer.tu2.ru/.
Спасибо! Очень интересно было, как это сделано!
Прикольно!
Спасибо! 
Помните! Этот метод только для меня. Для вас его нужно затачивать... Например минимальную и максимальную ширину экрана.
Спасибо, на днях испробую этот способ на практике... Но у меня в FF ссылки главная и о компании криво отображаться, т.е. накладываться на блоки. Думаю чтобы этого не было нужно отступ в CSS прописать от блоков...
У меня в фф нормально все отображается. Скорее всего это зависит от разрешения монитора. Да, пропиши отступы...
В IE7, увы, блоки не прозрачны. Т.е. уже не кроссбраузерно получилось.
Прочитайте правильно статью, и вы найдете «Пример не является полностью автоматизированным». Вообще я добавил цвет на блоки специально, можно обойтись без них... Если кто-то не понимает css, то эта статья не для него.
Чтобы сделать блоки прозрачными, найдите класс «trans» и пропишите для него хаки на прозрачность.
Мне пригодилось, только опять пробоемы, у меня код сложнее, картинки вообще не видно стало.
Ольга, можешь написать на нашем форуме!
может кто то встречал код для резинового фона, только что бы картинку не плющело когда уменьшается во вертикали.
Nik ADA, пропиши:
#fon img{min-height: {x} ;}
Спасибо. Но нельзя ли в Вашем примере зафиксировать фон?
Дмитрий, нет. Здесь мы ставим картинку, а не фон. Этот пример подходит для сайтов с маленьким контентом.
А для сайтов с большим контентом у вас случайно нет примера? Давно ищу решения задачи, что бы при прокрутки текста, фон был фиксированным, а при уменьшении окна, резиновым ?
Дмитрий, если чесно, то я не знаю... У background можно фиксировать фон...
background у меня фиксируется, но когда окно уменьшается всё сжимается, кроме фона. Если что то попадётся, буду весьма признателен.
Спасибо огромное за статью, реально очень помогла. Но у меня фоновый рисунок несколько другой, а точнее верх не белый. И виден белый отступ. Помогите плз.
Кирилл, в смысле, как белый оступ... Поубирай где не нужно margin и padding.
А можно на вашем сайте обсудить эту статью более подробно и задать вопросу НУБОВСКИЕ по постройке страницы?!
TIM21, напиши мне на icq. Номер найдешь на странице контактов...
а есть хак под ie 6 для этого?
Что именно не работает на ИЕ6?
вымещает весь контент собой, ниже.
div id=fon фоновая картинка, а в остальных броузерах всё нормально
А скриншот посмотреть можно?
а можно ли вместо полупрозорых колонок белого цвета сделать полупрозорую картинку?
pioner, конечно. В блок sid или note вставьте картинку и в стилях пропишите ей прозрачность.
Добрый день. Одно но!, если браузер растянуть по высоте фоновая картинка не ряснится а становится 100% ширины div и 100% своей ширины, под фоном образуется пустота, колонки же растягиваются на высоту браузера. Можно посмотреть в приведенном примере. Вопрос: как это исправить? Спасибо.
Алексей, наверное я что-то не понял. Покажите скриншот. У меня, вроде, все нормально.
Отправил скриншет на этот адрес evgen.pm@gmail.com
Алексей, этот пример подходит только для страниц с маленьким контентом. Но если очень нужно, то решение вашей задачи есть только через position:fixed, для фоновой картинки.
#fon img{
height:100%;
width:100%;
position:fixed;
}