Масштабируемая картинка на фоне сайта или резиновый фон

Масштабируемая картинка на фоне сайта или резиновый фон

Озадачился вопросом, как сделать резиновый фон. Дизайнеры, они ведь не всегда знают основных правил верстки, им лишь бы сделать. Сколько макетов теряется при этом.. Эх.

Картинка на фоне должна сужаться и растягиваться по мере изменения окна браузера. Каркас из двух колонок. Минимальная ширина 1000px. Это все мы рассмотрим сегодня.

Задаем position absolute и картинке и самому контенту. Затем с помощью z-index помещает фон вниз, а все остальное наверх.

Делаем див, внутри которого будет лежать фоновая картинка.
<div id="fon">
<img src="fon.jpg" alt="" />
</div>

#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/.

22 марта 2009 в 16:0038 комментариев Верстка,

Комментарии — 38 комментариев

  1. Алексей, этот пример подходит только для страниц с маленьким контентом. Но если очень нужно, то решение вашей задачи есть только через position:fixed, для фоновой картинки.

    #fon img{
    height:100%;
    width:100%;
    position:fixed;
    }

  2. #10822 Goliaf в 0:21, 9 января 2011: (подписался)

    Ответить | Цитировать

    А зачем Два закрывающих дива?

  3. #11669 Веб в 13:16, 7 июня 2011: (подписался)

    Ответить | Цитировать

    Скажите а как такое сделать с фоном, только если содержимое — флеш?

  4. #11714 Alqanor в 11:29, 18 июня 2011:

    Ответить | Цитировать

    Алексей, попробуйте добавитьв body атрибут overflow: hidden.

  5. #19259 Илья в 6:36, 17 апреля 2013: (подписался)

    Ответить | Цитировать

    Проверил на ipad первом. При вращении девайса все съезжает. Приходится обновлять страницу

  6. #24275 Алексей в 15:33, 19 декабря 2013:

    Ответить | Цитировать

    Пытаюсь подобное реализовать у себя но сайте, но у меня есть проблема, которая есть и в вашем примере…Если окно браузера уменьшить и протянуть нижний скролинг вправо, то появляется пробел между фоном и окном браузера…скрин прилагаю http://pixs.ru/showimage/Bezimeni1j_4618220_10149854.jpg

  7. #33584 Михаил в 22:13, 25 августа 2014:

    Ответить | Цитировать

    Уменьшите ваш сайт до размеров мобильника, в вашем решении получается не очень красивое искажение картинки

  8. #34093 Bloodlog в 13:14, 3 сентября 2014:

    Ответить | Цитировать

    Лучше на картинку не position : absolute, а fixed ставить…Иначе бага при прокрутке будет.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting