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.
LVL 5
AntonioPAsked:
Who is Participating?
 
DaydreamsConnect With a Mentor Commented:
This may be more clear:

This:
url(images\grad2.jpg)

..should be this:
url(images/grad2.jpg)
0
 
seanpowellCommented:
Well, there's some illegal syntax here :  height=100%
<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...
0
 
AntonioPAuthor Commented:
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
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
seanpowellCommented:
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;">
0
 
AntonioPAuthor Commented:
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?

0
 
DaydreamsCommented:
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.



0
 
EpistemoCommented:
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.appVersion) > 4) {
 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.appVersion) > 4) {
 document.writeln('</tr></td></table>');
} 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.



0
 
seanpowellCommented:
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">

0
 
AntonioPAuthor Commented:
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!
0
 
DaydreamsCommented:
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!
0
 
DaydreamsCommented:
Page Editor: Maybe the points could be reduced here for me.. 250 for a slash seems too much.
0
 
seanpowellCommented:
No way Jose - sometimes it's all about the little things.
0
 
DaydreamsCommented:
You are too generous.. thank you:)
0
 
AntonioPAuthor Commented:
Man, it's a regular love-fest going on here... ;)
0
 
seanpowellCommented:
It makes up for the lack of wages...
0
 
DaydreamsCommented:
All you need is love:)   ..and a few points here and there lol
0
 
timkamerCommented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.