Фиксированный фон сайта средствами Html +

Фиксированный фон сайта средствами Html

Оформление background по размеру всех экранов. Если вы хотите чтобы сложный фон страницы (картинка) растягивался по всему экрану и был фиксированным, т.е. без прокрутки,

то этот способ который излагается ниже наиболее простой, с использованием стандартных средств html и css.
Многие веб-мастера умудряются сделать подобное средствами java script но я думаю когда есть возможность оформить это более простым способом и кода этот способ отнимает меньше ресурсов на интерпретацию на клиентской машине, то лучше естественно использовать его.

Ниже приводятся два решения:
Первый способ
Код CSS:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {/*здесь можно воткнуть описание текста страницы*/}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
Код HTML:
<body>
<div>
<img id=»background» src=»/rabbit.jpg» alt=»» title=»» />
</div>
<div id=»scroller»>
<div id=»content»>
</div>
</div>
 Этот способ подходит не для всех браузеров, поэтому более интересен второй:
CSS:
html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
html {overflow:hidden;}
body {/*описание шрифтов и т.д. */
background-image: url(/*адрес фоновой картинки*/);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
HTML код:
<div id=»scroller»>
<div id=»content»>
</div>
</div>
Пример последнего способа можете увидеть на этом сайте. Пока мне нравится так :). Если у вас какие дополнения к этим способам или может даже что-то лучше этого, милости прошу в комментарии.
Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Нет комментариев

(Обязательно)
(Обязательно, не публикуется)

Я пришел к тебе с дискетой - рассказать, что сеть упала
beget