PDA

Click to See Complete Forum and Search --> : diffirent backgrounds for diffirent divs on the same page

Salam
03-18-2003, 02:52 AM
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:

Thanks,
Salam

<head>
<STYLE TYPE="text/css">
body {margin-right: 140px; margin-left: 140px; margin-top: 163px}
#top {position: absolute; top: 0px; left: 0px; height: 155px; width: 100%}
#right {position: absolute; top: 163px; right: 0px; width: 135px}
#left {position: absolute; top: 163px; left: 0px; width: 135px}
</STYLE>
</head>

<body>
<p align="center"> body content </p>
<!------------------>

<div id="top">
top content
</div>
<!------------------>

<div id="right">
right side content
</div>
<!------------------>

<div id="left">
left side content
</div>
<!------------------>

</body>
Nicodemas
03-18-2003, 03:00 AM
in your ID definitions, add:


background-color:######
Salam
03-18-2003, 03:39 AM
Thanks Nicodemas, works for sure. Now I have two issues here:

First: can I set background images for the diffirent divsions or just background colors.

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:
height: expression(document.body.offsetheight)
Also, I tried height=100% which worked but created non-neccesary scroll bars.

Thanks a lot
Salam
nkaisare
03-18-2003, 07:47 AM
You can set all of the background style properties.
{ background: #ffffff url('bg.gif') 100px 200px fixed no-repeat }
or equivalently:
{ background-color: #ffffff;
background-image: bg.gif;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100px 200px }
http://www.w3schools.com/css/css_reference.asp#background

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.

You can however create such effect without javascript by nesting divs.

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.
Salam
03-22-2003, 03:12 AM
Thank you for your repply nkaisare. That is what I needed to know :)

Salam