Fixed background images

30.01.2009 css, дизайн

Наверное сразу лучше начать с простейшего примера

Разметка

<div class="content green">...</div>
<div class="content blue">...</div>
<div class="content yellow">...</div>

CSS

.green {
	padding:10px 20px 10px 200px;
	border-bottom:1px solid #666;
	background: transparent url(./circle_green.gif) 20px 20px fixed no-repeat;
}
.blue {
	padding:10px 20px 10px 200px;
	border-bottom:1px solid #666;
	background: transparent url(./circle_blue.gif) 20px 20px fixed no-repeat;
}
.yellow {
	padding:10px 20px 10px 200px;
	border-bottom:1px solid #666;
	background: transparent url(./circle_yellow.gif) 20px 20px fixed no-repeat;
}
...

Фактически все очень просто. Фоновым изображениям в блоках задается свойство background-attachment:fixed и при прокрутке одно изображение заменяется другим.

Не обошлось конечно без фиксов для ИЕ.

Примеры использования

• www.econsultancy.com/reports
• complexspiral demo (Eric Meyer)
• We Bleed Design (Bryan Katzel)

via http://www.askthecssguy.com/2009/01/mike_asks_the_css_guy_about_a.html