Div background image disappears in Mozilla, not IE
In my first stab at a CSS-based site, I've been able to solve most of my problems with a little google action, but this problem's not coming up for me.
I have a fixed-width page, and I'm centering the main div for larger resolutions. I have a background image that I want to be behind the fixed width portion. That image fades to almost black at the bottom, so I set the page background to that "almost black" color such that it seems to blend seamlessly on down for longer pages.
Right now I have everything inside a div with a background image. Initially the background image wasn't showing through, but I found a site that said that was because that div only had more divs in it, no content. So I stuck in a transparent gif, and suddenly it worked in IE:
<div id="bigbox" style="background: url(images/grad2.jpg) top no-repeat; height=100%; color: transparent" > <img src="damnfoolery.gif" height="600" width="1">
But in Firefox and in Netscape 6.2, the background image apparently chooses randomly from among these three:
1. Not show up
2. Show up for an instant and then disappear
3. Show up, but disappear if I resize, or if I minimize the browser and restore it.
You can see what I mean at http://home.stny.rr.com/prats/testsite/
A little trick to clean up my code would be great, but if I have to redo my whole kludgy concept, that advice would be useful as well.
I have a fixed-width page, and I'm centering the main div for larger resolutions. I have a background image that I want to be behind the fixed width portion. That image fades to almost black at the bottom, so I set the page background to that "almost black" color such that it seems to blend seamlessly on down for longer pages.
Right now I have everything inside a div with a background image. Initially the background image wasn't showing through, but I found a site that said that was because that div only had more divs in it, no content. So I stuck in a transparent gif, and suddenly it worked in IE:
<div id="bigbox" style="background: url(images/grad2.jpg) top no-repeat; height=100%; color: transparent" > <img src="damnfoolery.gif" height="600" width="1">
But in Firefox and in Netscape 6.2, the background image apparently chooses randomly from among these three:
1. Not show up
2. Show up for an instant and then disappear
3. Show up, but disappear if I resize, or if I minimize the browser and restore it.
You can see what I mean at http://home.stny.rr.com/prats/testsite/
A little trick to clean up my code would be great, but if I have to redo my whole kludgy concept, that advice would be useful as well.
ASKER
Oops! Yea, I had some problems with my fingers typing = all over the place. ;)
Okay, I removed the "bigbox" div, removed the bgcolor attribute from body and added that style attribute inline.
Now the background is missing in IE as well as the mozillas. It's just solid 220044.
Here's a simplified file
http://home.stny.rr.com/prats/testsite/simplified.html
Okay, I removed the "bigbox" div, removed the bgcolor attribute from body and added that style attribute inline.
Now the background is missing in IE as well as the mozillas. It's just solid 220044.
Here's a simplified file
http://home.stny.rr.com/prats/testsite/simplified.html
Not like this:
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: url(images\grad2.jpg) #220044 no-repeat top center;">
Like this - the order is important, color before image...
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images\grad2.jpg) no-repeat top center;">
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: url(images\grad2.jpg) #220044 no-repeat top center;">
Like this - the order is important, color before image...
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images\grad2.jpg) no-repeat top center;">
ASKER
I switched them around, and it's the same; no background image. Could it be something (one of the things) in my style sheet, or something to do with the floats on the page?
Just a note, you need to correct the path:
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images\grad2.jpg) no-repeat top center;">
^
The slash should be thus (see the slash now in images/grad2.jpg):
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images/grad2.jpg) no-repeat top center;">
It may have worked locally but not on the web. Works for me (with correction) in Mozilla and IE6.
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images\grad2.jpg) no-repeat top center;">
^
The slash should be thus (see the slash now in images/grad2.jpg):
<body alink="#ff0000" link="#0000ff" text="#000000" vlink="#800080" style="background: #220044 url(images/grad2.jpg) no-repeat top center;">
It may have worked locally but not on the web. Works for me (with correction) in Mozilla and IE6.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Nah ... you have the Mozzila bug ... (not really a bug, yet it is. lol)
Mozilla has problems when displaying a background image (as div) when other divs are on top of this.
It sucks yet there is a simple solution. (not clean, yet do-able)
Just write a smal javascript with a mozilla detection and use an if / else statement.
Use the same id though....
Example:
#main {background: #220044 url(images/grad2.jpg) no-repeat top center; width:500px;}
Then in the page.
<script language="JavaScript" type="text/javascript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVers
document.writeln('<table width="500" cellspacing="0" cellpadding="0" id="main"><tr><td>');
} else {
document.writeln("<div id="main">');
}
</script>
lalalalalalala text .....
then at the end .....
<script language="JavaScript" type="text/javascript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVers
document.writeln('</tr></t
} else {
document.writeln("</div>')
}
</script>
That's it ....
I know ... not a clean solution and I wish we didn't have all these browser issues, but ...
Hope this helps btw.
Mozilla has problems when displaying a background image (as div) when other divs are on top of this.
It sucks yet there is a simple solution. (not clean, yet do-able)
Just write a smal javascript with a mozilla detection and use an if / else statement.
Use the same id though....
Example:
#main {background: #220044 url(images/grad2.jpg) no-repeat top center; width:500px;}
Then in the page.
<script language="JavaScript" type="text/javascript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVers
document.writeln('<table width="500" cellspacing="0" cellpadding="0" id="main"><tr><td>');
} else {
document.writeln("<div id="main">');
}
</script>
lalalalalalala text .....
then at the end .....
<script language="JavaScript" type="text/javascript">
if (navigator.appName == "Netscape" && parseInt(navigator.appVers
document.writeln('</tr></t
} else {
document.writeln("</div>')
}
</script>
That's it ....
I know ... not a clean solution and I wish we didn't have all these browser issues, but ...
Hope this helps btw.
Thanks Daydreams, missed the slash there...
Just a note. You don't need any javscript for this at all...
However, your current setup is going to look strange if we set the background on the body tag, my apologies.
I've taken a closer look at what you've done, just add the following to your CSS:
html,body { height:100%; }
#midwid {
position: relative;
left: 0px;
top: 0px;
height: 100%;
width: 768px;
padding:0;
margin: -15px auto ;
voice-family: "\"}\"";
voice-family:inherit;
margin: -12px auto ;
/* add the background here */
background: #220044 url(images/grad2.jpg) no-repeat top center;
a:link { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
a:active { color: #ff0000; }
}
and then the html is simply:
<body>
<div id="midwid">
Just a note. You don't need any javscript for this at all...
However, your current setup is going to look strange if we set the background on the body tag, my apologies.
I've taken a closer look at what you've done, just add the following to your CSS:
html,body { height:100%; }
#midwid {
position: relative;
left: 0px;
top: 0px;
height: 100%;
width: 768px;
padding:0;
margin: -15px auto ;
voice-family: "\"}\"";
voice-family:inherit;
margin: -12px auto ;
/* add the background here */
background: #220044 url(images/grad2.jpg) no-repeat top center;
a:link { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
a:active { color: #ff0000; }
}
and then the html is simply:
<body>
<div id="midwid">
ASKER
Oh my god, a little itsy bitsy slash was responsible for that?
It works now, and it looks good. I definitely feel better with the background image in <gasp> the body background. I will move stuff from the html over to the style sheet.
But now I accidentally clicked too many buttons and sent all the points to Daydreams. Seanpowell, I'll open another question with points for you.
Thanks for your help!
It works now, and it looks good. I definitely feel better with the background image in <gasp> the body background. I will move stuff from the html over to the style sheet.
But now I accidentally clicked too many buttons and sent all the points to Daydreams. Seanpowell, I'll open another question with points for you.
Thanks for your help!
AntonioP,
Thanks for accepting my answer, but since Sean did all the real work here this question could be changed by the Page Editor to award points to him, as I only commented on a minor detail.
If the question is left as is then I am pleased you are awarding deserved points to Sean in another question. Thanks!
Thanks for accepting my answer, but since Sean did all the real work here this question could be changed by the Page Editor to award points to him, as I only commented on a minor detail.
If the question is left as is then I am pleased you are awarding deserved points to Sean in another question. Thanks!
Page Editor: Maybe the points could be reduced here for me.. 250 for a slash seems too much.
No way Jose - sometimes it's all about the little things.
You are too generous.. thank you:)
ASKER
Man, it's a regular love-fest going on here... ;)
It makes up for the lack of wages...
All you need is love:) ..and a few points here and there lol
a backgound image in a div is not displaying in firefox
within my style sheet i have background: #FFFFFF url(../images/menuBG.gif) no-repeat top center;
shows up in IE, but not firefox.
Thanks in advance for any help. I've been googling for hours on this. no luck.
tim
within my style sheet i have background: #FFFFFF url(../images/menuBG.gif) no-repeat top center;
shows up in IE, but not firefox.
Thanks in advance for any help. I've been googling for hours on this. no luck.
tim
<div id="bigbox" style="background: url(images/grad2.jpg) top no-repeat; height=100%; color: transparent" >
Put the image on the body tag instead, you won't need that div or spacer anymore.
<body style="background: #220044 url(images/grad2.jpg) no-repeat top center;">
We should move this out of inline mode, but let's get it working right first...