background fixed in DIV IE vs Firefox

[Extinct]

Hi,

I'm trying to make a fixed background in a DIV. This is what I have


In my stylesheet I have
#rightcol {
background-color:#FFF;
float: left;
width: 530px;
height: 440px;
margin-left: 10px;
margin-bottom: 1px;
overflow: auto;
scrollbar-3dlight-color:#1B1B1F;
scrollbar-arrow-color:#1B1B1F;
scrollbar-base-color:#8C7C6C;
scrollbar-darkshadow-color:#1B1B1F;
scrollbar-face-color:#8C7C6C;
scrollbar-highlight-color:#8C7C6C;
scrollbar-shadow-color:#8C7C6C;
scrollbar-track-color:#DCCCBC;
}


In the html file I have

<div id="rightcol" style="background-image:url(pics/apple_bg.jpg);background-repeat:no-repeat;">

In Firefox this does exactly what I want. The background is in place where it should be and doesn't scroll.

In IE it's where it should be but it does scroll.

If I add background-attachment:fixed like this

<div id="rightcol" style="background-image:url(pics/apple_bg.jpg);background-attachment:fixed;background-repeat:no-repeat;">

In Firefox it doesn't scroll but it's in the wrong place. I guess it fixes itself to the body.

In IE it's in the correct place and doesn't scroll.

Can anyone tell me what's going on here? I guess I could fix this by hiding the background-attachment part from firefox, but I don't know how to do this.

I even tried to put the background-attach in an IE hack like this (I saw it in some other post here), but it doesn't seem to work. Does it only work with a class selector?

 

[Extinct]

this is the hack I used

* html #rightcol {
background-attachment:fixed;
}

 

[Vragabond]

I am confused now. Did you solve this problem or not? Anyway, here's a little bit of explanation for your problems:

This will be very shocking to hear but IE is wrong on both counts. This is what the W3 standards have to say about backgrounds:

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').

Note that there is only one viewport per view. If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with the element, and a 'scroll' background doesn't move with the scrolling mechanism.

This is explained here:

http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment

Quirksmode.Org tackled this problem as well in an article.

As for your solution, I am not sure why you even want to use inline styles. Just move everything to a separate stylesheet and you should be ok (and add the hack for IE):

#rightcol {
  float: left;
  width: 530px;
  height: 440px;
  margin-left: 10px;
  margin-bottom: 1px;
  overflow: auto;
  background-color:#FFF;
  background-image: url(pics/apple_bg.jpg);
  background-repeat: no-repeat;
  _background-attachment: fixed;
  scrollbar-3dlight-color: #1B1B1F;
  scrollbar-arrow-color: #1B1B1F;
  scrollbar-base-color: #8C7C6C;
  scrollbar-darkshadow-color: #1B1B1F;
  scrollbar-face-color: #8C7C6C;
  scrollbar-highlight-color: #8C7C6C;
  scrollbar-shadow-color: #8C7C6C;
  scrollbar-track-color: #DCCCBC;
}

 

[Extinct]

First of all thank you for the feedback. In the mean time I did solve the problem.

The reason that it wasn't accepting the IE hack (* html #rightcol {}) was that I had background: inline in the html page instead of background-image:

And the reason why I use inline styles for this is because every page needs a different background (depending on the subject).

here is the temporary location of the site

http://users.pandora.be/Musketeer/Website/Links.htm

 

[ChrisHirst]

And the reason why I use inline styles for this is because every page needs a different background

You don't need to use inline styles for this

use a common style sheet, then simply override a few properties with an in-page style definition

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[ChrisHunt]

Try to keep inline styles to a minimum. If you need a different picture on each page, only define [tt]background-image[/tt] inline (or in a <style> element), don't put [tt]background-repeat[/tt] in there too.

An alternative method (neater, though not necessarily better) is to give the <body> element of each page a unique ID:

<body id="apples">

Then you can put all the image calls in the stylesheet:

#rightcol {
  float: left;
  /* ... other rules that apply to all #rightcols in here ... */
}

#apples #rightcol {background-image:url(pics/apple_bg.jpg);}

There's a performance overhead here - visitors have to load the CSS definitions for all the pages, whether or not they visit them. But the pages are left neater, and if you decide to change the look of the pages, you'll have everything in one place to change.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd