Topic: Me again -> background-attachment: fixed; (Page 1 of 1)

Everything I've read says that background-attachment: fixed; works in NN 6 and IE 4+....but my backround image is disappearing....It does work in Windows IE6...I'm at a loss...when I delete the attribute, my image shows back up. http://www.airplusfootcare.com/2002/Index3.html
and the CSS for "mainb" is
#mainb {
background-color:#ffffff;
background-position: left top;
background-repeat: no-repeat;
background-image: url(images/mainb.gif);
background-attachment: fixed;
height:371px;
position: relative;
overflow: auto;
width:135px;
float:left;
}
Any ideas?


[This message has been edited by Jeni (edited 01-24-2002).]

Jeni: We ran into this problem with ideas for turning the GN CSS-only. Its:

background-image: url("images/mainb.gif");


See: www.w3.org/TR/REC-CSS2/colors.html#background-properties

Emps

Hmm, according to http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-uri , the quotes shouldn't be necessary. Darn old browsers.

However, I would also avoid using background-color, background-image, etc all separately, if you want it to work in NN 4.x. I beleive NN doesn't support all the background stuff properly unless you specify it all at once like

background:#FFF url(images/mainb.gif) fixed left top no-repeat;

I may have the order wrong.

I'm confrooosed. So you're saying I can't have it? Cause what I read there was what I've previously read...I have to be missing something...Can you explain it to me?
*dense*
Edit>OKAY the quotes. Now I get it....Thank you..
Emps I have a feeling that by the end of this day I'm gonna owe you a case of those Polar beers.

[This message has been edited by Jeni (edited 01-24-2002).]

Oooh, I think we both misunderstood that background-attachment:fixed was causing the problem. (tip: don't rely on people reading the entire subject line, put all important info in the post itself =)

Good point Slime! I fixed my original post...Hope that helps
And yeah the quotes didn't fix my problem....but hey, they don't hurt, so they shall stay!

[This message has been edited by Jeni (edited 01-24-2002).]

I must admit I didn't bother addressing the attachment problem because it seemed fine and the only thing I noticed that could be causing the problem was the URL syntax.

I suspect Slime's way will work (does that work in NS4.x? I had assumed some of the properties weren't supported - I'll have to try) but try switching things around to:

#mainb {
background-color:#ffffff;
background-image: url('images/mainb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
height:371px;
position: relative;
overflow: auto;
width:135px;
float:left;
}
[/CODE]

Getting them in the 'right' order could be what is needed.

[edit: This explains the NS4.x background problems: www.mako4css.com/cssbg.htm
and doing it that way, can it seems, help your background-color appear]

Emps


With patience and saliva the ant swallows the elephant - Colombian proverb

[This message has been edited by Emperor (edited 01-24-2002).]

Hmmm looking for a reference now in what order to put them in....
Sheesh. I'm a useless one today.
And I think I'm going to use a seperate stylesheet for NN4 all together....It doesn't appear to like my div that's encompassing all my other divs...

[This message has been edited by Jeni (edited 01-24-2002).]

Jeni: I may be missing the point but I'm looking at it in IE5/Win and there is no problem with the background (a little inner slice of that main curve) staying where it is supposed to in #mainb. What browser/paltform combinations are causing problems (it wasn't too clear to me!!)?

Emps

Sorry...
BAD ON-Mac IE5, NN any version, any platform.
Windows IE5 and 6 are fine.

Jeni: OK that would suggest to me that it is something pretty small and minor in your code as IE/win is the most flexible with code problems (or allows more sloppy code if you want to be harsh!!). I'd try reordering them and then Slime's idea and then create a simple test page. Or run your browsers (you have access to more than I have here) over the CSS1 Test Suite's 'Color and Background Properties' test suite:
www.w3.org/Style/CSS/Test/current/sec53.htm

[edit: And I thought I'd also throw in the draft CSS2 test suite: http://www.meyerweb.com/eric/css/tests/css2
which might prove some use]

Emps

[This message has been edited by Emperor (edited 01-24-2002).]

Thank you for that test page...It doesn't work in IE 5 Mac...It scrolls with the page....In NN6 it's completely gone. Well at least we know I'm not insane and that it just doesn't work in NNMac.

Jeni: That is an intersting finding. I am suprised that such a fundamental style breaks so badly in those browsers. Have a look at this page for fun with backgrounds (I'm not sure it will tell you any more than you know but its interesting):
www.meyerweb.com/eric/css/edge/complexspiral/demo.html

And about this:

quote:

---

at least we know I'm not insane

---

Well you are in the Asylum so we can't guarantee that!!

Emps

I'm still not convinced we've tracked down the problem - the background properties on the compatibility chart:
www.webreview.com/style/css1/charts/mastergrid.shtml

Suggest there shouldn't be a problem in IE5/Mac or NS6.

And this bug table, although giving me a headache, goes into things in more detail:
www.richinstyle.com/bugs/table.html

but apaprt from a slight problem with background-position it doesn't look like there should be that much of a problem.

That said I'm not sure what the answer is.

Emps

That's the exact chart I referenced at the beginning of all this. It says it should work. I have the browsers. I tested that W3C test page. It doesn't work. I just don't know what to think....Mayhap some compromise is in order....again

Jeni: I'm just throwing out ideas here but:

1. Perhaps the charts are for the style fixed on the body tag and not on a DIV within the page (although I can't see why this would happen).

2. Perhaps something is clashing and the only things I can think of are float and overflow. You might want to make up a simple test page to see.

All very confusing but interesting (well for me anyway - I'm sure its pretty frustrating for you!!).

Emps

I am soooooooo confused. It was the image. But that doesn't make any sense. It doesn't work on the W3C page either. I SWEAR....I am so sorry...

Edit>Oh god I'm a dumbass. There are two sets of vertical scrolls on their page. It seems I was using the wrong one.

Well now that I've wasted a day of everyone's life....
I'm going to go have a case of beer myself.

[This message has been edited by Jeni (edited 01-24-2002).]

Jeni: Does this mean you've fixed the problem? Does the test page work properly?

I don't consider the time wasted if it leads to a better understanding of the issues (and as I was already wasting my time trying to coax a printer to work I welcomed the distraction!!).

Emps

Well yes and no. The test page will work as long as I pick an image other then the one I want. I've tried everything I can think of...I resaved it as a gif; as a jpg....I cropped it with more white space....It just wont show up and I don't know what to do....

Okay so I got my test file to work....
NOW my page wont...I've added and deleted single things at a time and I just can't figure it out...Its not consistent. If it's just the maina div it works, if any other divs are there, it doesn't.
Edit>Nevermind. I gave up. I compromised my layout a little, but I just got rid of the graphic in the scrolling area all together.

[This message has been edited by Jeni (edited 01-25-2002).]

Jeni: I suspect you were almost there and it was something pretty basic - typo or not getting the path quite right but its you call (and there is only so long you can spend fiddling with these things!!

I'm glad to see there isn't a big flaw in such a fundamental style though!!

Emps

Does the background-attachment fixed work outside of the {body tag? I think in Web Monkey it is stated that it does not work on block or inline elements.. I had this problem also so if there is a solution.. hope there is..