Div Background Image
Posted
by marskie
on Stack Overflow
See other posts from Stack Overflow
or by marskie
Published on 2010-05-16T05:03:45Z
Indexed on
2010/05/16
5:10 UTC
Read the original article
Hit count: 228
i just wanted to put the 2nd grey image background on the bottom part of my body. Sorry for this kind of newbie question thank a lot for helping newbie like me..
#bgtop {
background-image:url(images/bgtop.png);
background-repeat: repeat-x;
}
#bgbottom { background:url(images/bgbottom.png) repeat-x bottom;}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ededed;
margin: 0; /
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 80%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#mainContent {
padding: 0 20px;
background: #FFFFFF;
}
#footer {
padding: 0 10px;
background:#DDDDDD;
}
#footer p {
margin: 0;
padding: 10px 0;
}
HTML
<body>
<div id="bgtop">
<div id="bgbottom">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
</div>
</div>
<!-- end #container --></div>
</body>
</html>
© Stack Overflow or respective owner
