Фон (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% во весь сайт!
Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!
(173 оценок, среднее: 5,00 из 5)