Fixing a BG in Netscape 7.0

[the_idiot]

I need to fix and position different bg "watermarks" on each page of a site. My CSS declaration is as follows:

.emailbg {
background-attachment: fixed;
background-image: url(Assets/email_wm.jpg);
background-repeat: no-repeat;
background-position: -251px -48px;
}


Each page contains its own declaration as each page has different image, so url, classname, and postion coords are different for each instance.

This style works fine in Windows IE 6, but the background-attachment and background-position attributes are ignored in the following browsers:

• IE 5 for Mac OS X
• Netscape 7.0
• Various versions of Mozilla

Is there a cross browser-compatible way to specify bg position and scroll attributes?

thanks

[toicontien]

The only thing I caught in the code you posted was that the URL to the image was not in quotes. According to the standards, specifying a background image is as follows:

background-image: url("url_to_image");

It sounds crazy, but not encasing that url in quotes might wig out more strictly standard compliant browsers (like every other browser than NS 4.x and IE/PC)

Could you post a link to the page?

I hope this helps

[the_idiot]

Here is the link

www.incrediblepets.net


In the mean-time, I will try adding the quotes to the url.

thanks

[the_idiot]

I tried adding the quotes . . . No luck.

[nkaisare]

The pages look same to me in IE5, NS7, Opera7.10. Have you sorted out your problem?

[Charles]

Originally posted by toicontien
The only thing I caught in the code you posted was that the URL to the image was not in quotes. According to the standards, specifying a background image is as follows:

background-image: url("url_to_image");

It sounds crazy, but not encasing that url in quotes might wig out more strictly standard compliant browsers (like every other browser than NS 4.x and IE/PC)

And what standard is that? According to the CSS1 Specification:

The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself (as defined in [11]) followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced.
http://www.w3.org/TR/REC-CSS1#url

[the_idiot]

Originally posted by nkaisare
The pages look same to me in IE5, NS7, Opera7.10. Have you sorted out your problem?

The backgrounds are all still a mess in NS 7.0, IE 5.2.1, and Mozzilla 1.2b on my G4, and in NS 7.0 on my PC.

interesting.....

Can anyone else verify that the backgrounds remain fixed in the afformentioned browsers?

www.incrediblepets.net

Maybe it's just my machines.


thanks

[jdavia]

This is whatI am using. A color, no-repeat, position, and fixed.

background-image: url ( dash.jpg ); background-color: #344b29; background-repeat: no-repeat; background-position: bottom;background-attachment: fixed;}

Works in NS7 and IE6 not NS4

Maybe you need a space between url and (

[nkaisare]

This is your CSS from incredible.css:

.textbox {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 39px 277px;
font-weight: normal;
}
body {
background-color: #FFFFFF;
}
.titlebox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-image: url(Template_assets/title_bg.gif);
border: medium none #999966;
padding: 0px 2px 8px 25px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;

The href to your other CSS: "S_I_T_E/incredible.css" is incorrect. Also, you forgot the closing } for .titlebox

[the_idiot]

jdavia--

I tried adding the whitespace before the "(" but this actually made the image dissapear entirely! I may still use the whitespace though, if I cant find a better solution, because IE 6 was unaffected by it. This will give me a way of keeping the backgrounds for browsers in which they display properly, while removing the eye-sores from Netscape, etc.

--Thanks.



nkaisare--

I removed the bogus CSS link from the index.htm page, but, unfortunately, this did not clear up the problem. It did however restore the CSS styles to the text links at the bottom of the page.

I also looked at incredible.css, and the closing "}" for .titlebox was there, albeit after a fair amount of whitespace. I took out the whitespace just to see, but it had no effect.

Nevertheless, thanks for taking the time to look at my source.--


One thing I have noticed is that Netscape seems to reference position from the center of the image, whereas IE references the top-left corner. That is why the .birdwm, which is postioned as left center, has it's center aligned with the left edge of the table cell. Obviously, vertical position is irrelevent since the scroll attribute changes this value.

So what I really need now is a way to fix the image, since positioning will have to be a compromise between the point in the image from which the different browsers reference the position.

Thanks again,

[toicontien]

Found a partial fix - for most windows browsers anyway

Just replace the CSS on your page with the CSS below:

background-image: url(http://www.incrediblepets.net/Assets/about_wm.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

All I did was change the order of the statements. Here's what I think was happening.

ORIGINAL CSS

1. background-attachment: fixed;
2. background-image: url(Assets/about_wm.jpg);
3. background-repeat: no-repeat;
4. background-position: center center;

1. First the browser would set the background image to be fixed.

2. Then the URL to the image was given, loading the image in the window.

3. The browser was told to not tile the image.

4. Lastly it centered the image in browser window, not within the table cell.

5. When the user scrolled, Mozilla, NS 7, etc. seemed to "recenter" the image according to the browser window itself, so when the window scrolled, it was automatically recentered in the window, thus making it seem like the browser was ignoring the background attachment rule.

Basically the browsers seem to have been repeating the last css rule you declared, which was background-position: center center;

I reordered the declarations the way that the W3C CSS 1 and 2 specs recommended:

http://www.w3.org/TR/REC-CSS1#background

But it centers the image in the browser window, not within the table cell. I tried setting the table's position property to static and relative, but that didn't center it within the table cell like you want. I also had the table cell with the BG image positioned relatively at the same time, which did nothing.

In CSS1 and 2 specs, the order of specifying background properties is written:

background-color
background-image
background-repeat
background-attachment
background-position

and I rewrote it so that it went:

image
repeat
position
attachment

So the order that you write background properties does matter. I didn't know that until now either.

* Just a note: Opera 6.04 still fixes the image on the page absolutely and it seems to float in the same position on the page no matter where you scroll.

[jdavia]

Have you tried using body instead of emailbg That's where you want to fix it in't it. Without the (.)
The code is not compatible with NS4.7 Shows blank

[the_idiot]

Sorry for the late reply. I didn't have time to try the fixes until just now.

jdavia--

As per your suggestion, I tried using the body selector rather than a unique identifier for the table, but the background image only showed up in the space between the layout tables in the body of the document. I have not had time to try removing all CSS (i.e. text formatting and non-background related styles) specific to the tables to see if they are overriding the body background declaration, so I will try that next.


toicontien--

I tried both of the variations in your last post:

Just replace the CSS on your page with the CSS below:

code:--------------------------------------------------------------------------------
background-image: url(http://www.incrediblepets.net/Assets/about_wm.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
--------------------------------------------------------------------------------

and

I rewrote it so that it went:

image
repeat
position
attachment

Unfortunately, neither shift got NS to fix the bg on my machine. I did not get the opportunity to test the solution on my Macintosh, but the Windows version treated it just the same as before.

I have been reading through the on-line NS documentation, FAQs, etc., and have not come across this issue, although many realted to CSS differences/incompatibilities between NS and IE.

I am beggining to wonder if I am the only one having this problem, since I have not found any other documented cases and since your fix worked on your system.

Unless Netscape differs regionaly, what fixed the bg in your version should do so in mine as well. I went digging through the Netscape preferences looking for something about CSS handling, but found nothing directly related.

By the way, thanks for including the note about Opera, as I was wondering about that myself.

[the_idiot]

Once again, my ability to overlook the obvious has astounded me.

All that was required was that I remove the "background-attachment: fixed;" declararation.


Thanks to toicontien and jdavia. It was your comments about the image being positioned relative to the document window/body that got me thinking on the right track.

The fixed attribute refers to fixing an object relative to the document window rather than to other objects in the page. Depending on how you look at it, either moving text scrolls over a fixed image or a moving image scrolls under fixed text.

Now all I have to sort out is the postion of the images on the page, but this will be easier since I now know that NS position is document relative rather than object relative.


Thanks again to all who contributed suggestions. Now you know why I am

the_idiot

[Siddan]

Hi.. I am glad you got your problem fixed

I still have problem though with the macintosh not wanting to display the background.

It is just a simple backgrund url attachment for god sakes.. lol and I don´t have any "fixed" declaration, just a simple bg pic to atach within a div.

Just noticed it is ONLY the IE on mac that does not show the backgrounds... but in Safari and Netscape it sure shows alright