diffirent backgrounds for diffirent divs on the same page

L

liunx

Guest
Can I have diffirent background colors and may be different background images for diffirent divisions on the same page. I could not get that to work. Here is the code:<br />
<br />
Thanks,<br />
Salam<br />
<br />
<head><br />
<STYLE TYPE="text/css"><br />
body {margin-right: 140px; margin-left: 140px; margin-top: 163px}<br />
#top {position: absolute; top: 0px; left: 0px; height: 155px; width: 100%}<br />
#right {position: absolute; top: 163px; right: 0px; width: 135px}<br />
#left {position: absolute; top: 163px; left: 0px; width: 135px}<br />
</STYLE><br />
</head><br />
<br />
<body><br />
<p align="center"> body content </p><br />
<!------------------><br />
<br />
<div id="top"><br />
top content<br />
</div><br />
<!------------------><br />
<br />
<div id="right"><br />
right side content<br />
</div><br />
<!------------------><br />
<br />
<div id="left"><br />
left side content<br />
</div><br />
<!------------------><br />
<br />
</body><!--content-->in your ID definitions, add:<br />
<br />
<br />
background-color:######<!--content-->Thanks Nicodemas, works for sure. Now I have two issues here:<br />
<br />
First: can I set background images for the diffirent divsions or just background colors.<br />
<br />
Second, the right and left devisions do not carry the background color below the contained content in those divisions but act as if that is the background of the content displayed in those divisions. I tried doing the following but it did not make any change:<br />
height: expression(document.body.offsetheight)<br />
Also, I tried height=100% which worked but created non-neccesary scroll bars.<br />
<br />
Thanks a lot<br />
Salam<!--content-->You can set all of the background style properties.<br />
{ background: #ffffff url('bg.gif') 100px 200px fixed no-repeat }<br />
or equivalently:<br />
{ background-color: #ffffff;<br />
background-image: bg.gif;<br />
background-repeat: no-repeat;<br />
background-attachment: fixed;<br />
background-position: 100px 200px }<br />
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_reference.asp#background">http://www.w3schools.com/css/css_refere ... background</a><!-- m --><br />
<br />
With regards your second question: the background will apply to the container div. If the div ends, background ends too... it will not stretch all the way.<br />
<br />
You can however create such effect without javascript by nesting divs.<br />
<br />
I don't know much about javascript, but there is no reason why fixing the height of the div equal to the calculated height of the longest column (possibly body contents) won't work.<!--content-->Thank you for your repply nkaisare. That is what I needed to know :)<br />
<br />
Salam<!--content-->
 
You must log in or register to reply here.
Back
Top