Многие очень долбяться этим вопросом,как сделать фон (если сайт на дивах) чтобы растягивался по экрану.Это я про новичков.
Так вот решение есть два ,немного похожих.
Первый способ
Вставляем такой код
В CSS отсупы можете сами выбирать.
А в html коде
Демо можете посмотреть http://www.cssplay.co.uk/layouts/background.html
Честно мне этот способ не очень понравился,из-за того что он не подходит для всех браузеров. гораздо лучше второй.
Второй способ
В CSS надо написать такое (лучше всего скопировать,а то очень сложно самому написать такое)
А основном коде
Демо этого способа на моём сайте http://школьный-химик.рф/ или http://www.cssplay.co.uk/layouts/background2.html
Ну вот. если остались вопросы спрашивайте
k:
Так вот решение есть два ,немного похожих.
Первый способ
Вставляем такой код
Код:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#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 {font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(white-rabbit.jpg);
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;}
Код:
<div id="scroller">
<div id="content">
</div>
</div>Ну вот. если остались вопросы спрашивайте
k:
