27 октября 2009, 12:13

CSS «background-image» fit 100% (Фон на всю страницу)

Иногда хочется сделать фон тянущимся 100х100 %, но просто сделать это пока невозможно. Мы можем эмулировать фоновую картинку с помощью 2 дивов ;) Вкратце, один будет с картинкой, другой будет поверх его, и будет со скроллом. Оба 100х100 %. Дальше код? 
html, body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%
}
#bg_image { 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 1; 
  width: 100%; 
  height: 100%; 
}
#scrollable { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  z-index: 2; 
}
Сам HTML выглядит так
<body>
<div><img id="bg_image" src="/path/to/image.png" alt="" title="" /></div>
<div id="scrollable">
… content …
</div>
</body>
В даном случае, дивы позиционированы абсолютно, сортированы через зет-индекс и стоят сверху благодаря топ=0 и лефт=0. Можно ещё сделать через релейтив, если начнутся проблемы с анимацией блоков ;)

PS: применение очень прикольное можно придумать ;)
  • например сделать полупрозрачный пнг тучек, и в зависимести от времени суток менять фоновый цвет боди
  • или сделать прикольную галлерею ;) и т. д.


css
Забытые теги... CSS: list-style-position     ←   Ctrl   →     Странный CSS, диагностика сайта

2 комментария РСС

Сергей Волошин
Такой метод можно применять не только к body, но и к просто блокам тоже.
Я подобным образом делал в bobrdobr.ru для div class=«register» (градиентный такой), у которого фон растягивается по горизонтали.
Еще мне показалось что title для такой фоновой картинки может быть не всегда уместным.
Александр
Спасибо, отличная статья — помогло сразу. На удивление :)

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter