Масштабируемая картинка на фоне сайта или резиновый фон
Воскресенье, Март 22, 2009 16:00 
Озадачился вопросом, как сделать резиновый фон. Дизайнеры, они ведь не всегда знают основных правил верстки, им лишь бы сделать. Сколько макетов теряется при этом... Эх.
Картинка на фоне должна сужаться и растягиваться по мере изменения окна браузера. Каркас из двух колонок. Минимальная ширина 1000px. Это все мы рассмотрим сегодня.
Задаем position absolute и картинке и самому контенту. Затем с помощью z-index помещает фон вниз, а все остальное наверх.
Делаем див, внутри которого будет лежать фоновая картинка.
<img src="fon.jpg" alt="" />
</div>
height:100%;
width:100%;
z-index:1;
min-width:1000px;
max-width:1600px;
}
#fon img{
height:100%;
width:100%;
position:absolute;
}
Теперь див со всем остальным содержимым.
<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>
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/.
Loading ...
booblik сообщил:
Март 22nd, 2009 16:56
Спасибо! Очень интересно было, как это сделано!
Алексей сообщил:
Март 22nd, 2009 18:05
Прикольно!
Спасибо! 
WebMast сообщил:
Март 22nd, 2009 20:35
Помните! Этот метод только для меня. Для вас его нужно затачивать... Например минимальную и максимальную ширину экрана.
WOLF BESPREDEL сообщил:
Март 23rd, 2009 3:11
Спасибо, на днях испробую этот способ на практике... Но у меня в FF ссылки главная и о компании криво отображаться, т.е. накладываться на блоки. Думаю чтобы этого не было нужно отступ в CSS прописать от блоков...
WebMast сообщил:
Март 23rd, 2009 10:33
У меня в фф нормально все отображается. Скорее всего это зависит от разрешения монитора. Да, пропиши отступы...
SiteDev сообщил:
Апрель 2nd, 2009 12:20
В IE7, увы, блоки не прозрачны. Т.е. уже не кроссбраузерно получилось.
WebMast сообщил:
Апрель 2nd, 2009 18:54
Прочитайте правильно статью, и вы найдете «Пример не является полностью автоматизированным». Вообще я добавил цвет на блоки специально, можно обойтись без них... Если кто-то не понимает css, то эта статья не для него.
Чтобы сделать блоки прозрачными, найдите класс «trans» и пропишите для него хаки на прозрачность.
Ольга сообщил:
Апрель 8th, 2009 21:34
Мне пригодилось, только опять пробоемы, у меня код сложнее, картинки вообще не видно стало.
WebMast сообщил:
Апрель 9th, 2009 7:04
Ольга, можешь написать на нашем форуме!
Nik ADA сообщил:
Июнь 25th, 2009 18:46
может кто то встречал код для резинового фона, только что бы картинку не плющело когда уменьшается во вертикали.
WebMast сообщил:
Июль 13th, 2009 8:12
Nik ADA, пропиши:
#fon img{min-height: {x} ;}
Дмитрий сообщил:
Октябрь 2nd, 2009 11:01
Спасибо. Но нельзя ли в Вашем примере зафиксировать фон?
WebMast сообщил:
Октябрь 3rd, 2009 7:54
Дмитрий, нет. Здесь мы ставим картинку, а не фон. Этот пример подходит для сайтов с маленьким контентом.
Дмитрий сообщил:
Октябрь 5th, 2009 10:13
А для сайтов с большим контентом у вас случайно нет примера? Давно ищу решения задачи, что бы при прокрутки текста, фон был фиксированным, а при уменьшении окна, резиновым ?
WebMast сообщил:
Октябрь 5th, 2009 18:03
Дмитрий, если чесно, то я не знаю... У background можно фиксировать фон...
Дмитрий сообщил:
Октябрь 6th, 2009 17:00
background у меня фиксируется, но когда окно уменьшается всё сжимается, кроме фона. Если что то попадётся, буду весьма признателен.
Кирилл сообщил:
Октябрь 7th, 2009 21:05
Спасибо огромное за статью, реально очень помогла. Но у меня фоновый рисунок несколько другой, а точнее верх не белый. И виден белый отступ. Помогите плз.
WebMast сообщил:
Октябрь 8th, 2009 9:30
Кирилл, в смысле, как белый оступ... Поубирай где не нужно margin и padding.
TIM21 сообщил:
Октябрь 9th, 2009 19:10
А можно на вашем сайте обсудить эту статью более подробно и задать вопросу НУБОВСКИЕ по постройке страницы?!
WebMast сообщил:
Октябрь 9th, 2009 20:21
TIM21, напиши мне на icq. Номер найдешь на странице контактов...
2k сообщил:
Ноябрь 20th, 2009 18:47
а есть хак под ie 6 для этого?
WebMast сообщил:
Ноябрь 20th, 2009 18:56
Что именно не работает на ИЕ6?
2k сообщил:
Ноябрь 22nd, 2009 13:34
вымещает весь контент собой, ниже.
2k сообщил:
Ноябрь 22nd, 2009 13:35
div id=fon фоновая картинка, а в остальных броузерах всё нормально
WebMast сообщил:
Ноябрь 23rd, 2009 19:08
А скриншот посмотреть можно?
pioner сообщил:
Февраль 20th, 2010 2:34
а можно ли вместо полупрозорых колонок белого цвета сделать полупрозорую картинку?
WebMast сообщил:
Февраль 20th, 2010 8:53
pioner, конечно. В блок sid или note вставьте картинку и в стилях пропишите ей прозрачность.