Фон (background) на весь сайт
4 апреля 2011 в 0:25 в категории Статьи о CSS 0 комментариевНедавно искал решение для фона на всю страницу сайта для оптимизации. Дело в том, что раньше, для растягивания фона я использовал Javascript плагин jQuery Supersized. Но меня это как-то смущало… Фон и тот на js. А кроме этого на сайте еще несколько js. В общем решил я его убрать, но как?
На самом деле растянуть (background-image) изображение на 100% страницы — не проблема, достаточно всего лишь написать пару строк css кода.
Немного css:
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"/></div> <div id="scrollable"> … Тут уже ваш текст, картинки, ну в общем контент одним словом … </div> </body>
Конечно же ссылочка на пример: Фоновое изображение 100% во весь сайт!