Forum Moderators: not2easy

Message Too Old, No Replies

Two fixed backgrounds - one page

         

dimps

7:16 pm on Nov 13, 2003 (gmt 0)

10+ Year Member



I've been fighting all day with this, and I'm getting a bit desperate, could anyone please help?

I need two different backgrounds on the right and the left of the screen and they must be fixed. The content of the page will go into a centred table (width 85%)with a white background. The width of the bg graphics are 100 pixels, but with the centred table being 85%, the idea is to have the page stretch and shrink to accomodate all browsers from 640x 480 to 1024 x 768.

This works great, except that I get two scrollbars side-by-side on the right of the screen in IE. I have not got as a far as testing it in other browsers. What am I doing wrong?

From a posting earlier this year, I have created the following external script (only the relevant bits are listed here):

html
{
height: 100%;
overflow: auto;
}
div#bodyback
{
background-image: url('../images/bk_la.jpg');
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
overflow: auto
}
body
{
background: url('../images/bk_ra.jpg') right top;
background-repeat: no-repeat;
background-attachment: fixed
}

Then, in the HTML of the page itself, I have between the HEAD tags:

<link rel="stylesheet" title="Default" href="_shared/cal2005c.css">
<!--[if IE 6]>
<style type="text/css" title="Default">
div#bodyback{overflow: auto; height: 100%;}
</style>
<![endif]-->

<!--[if IE 5]>
<style type="text/css" title="Default">
div#bodyback{overflow: auto; height: 100%;}
</style>
<![endif]-->

And, between the BODY tags I have:
<div id="bodyback">
(The table goes here, 85% width, bg = white etc.. including all the content)
</div><!-- bodyback -->

Nick_W

4:35 pm on Nov 14, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to the CSS Forum [webmasterworld.com] @ WebmasterWorld!

I'm sorry but I'm baffled, either I don't understand you correctly or I'm just thick (probably the latter).

Can anyone help with this one?

Nick

AWildman

5:15 pm on Nov 14, 2003 (gmt 0)

10+ Year Member



My guess would be the overflow: auto on the html and div. Remove or change their value to see if that works.

dimps

7:17 pm on Nov 14, 2003 (gmt 0)

10+ Year Member



Thanks for the replies guys....

In the end I gave up and skinned that cat another way. However the hours spent learning about more advanced css and some of it's applications were not wasted, as I used some that knowledge today.

I thought the problem had something to do with overflow, however you need it on auto for IE, otherwise the background on the div scrolls. I thought maybe I had it in the wrong place or something. I also supect that the extra scrollbar was thrown in because the background graphics were too large for the smaller 'viewports'(new terminology I picked up).

Anyway, it's a great forum you've got here.. and I'll keep an eye on it.
Thanks once again.