HTML Help

phibs14 · Joined: 09 Oct 2009 Posts: 15

this is the code I have on one page at the moment.

<style type="text/css">
body {
background: #383838;
}
</style>

However I want to have the top 1/3 of the page in a darker grey.
what do I need to add to the code above.. I've tried using frames but this just mucks up the whole site...

any help appreciated. thanks in advance.
phibs14

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Until css3 is supported by all browsers you'll have to use a couple of div's to accomplish two backgrounds.

The css
Code: body {background: #383838}
#color {
background:#ccc;
height:33%;
width:100%;
position:absolute;
top:0;
left:0;
}
#inner {
position:relative;
width:78%;/*can be any width*/
margin:0 auto;/*remove if 100% width*/
padding:10px 0;
z-index:999;
}

The markup
Code: <div id="color"></div>
<div id="inner">
...all content here...
</div>

phibs14 · Joined: 09 Oct 2009 Posts: 15

thanks again! works perfect - I'm slowly getting there!.. :D