Solved

Div background image disappears in Mozilla, not IE

Posted on 2004-08-23
18
29,281 Views
Last Modified: 2011-08-18
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.
0
Comment
Question by:AntonioP
  • 6
  • 5
  • 4
  • +2
18 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11874900
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
 
LVL 5

Author Comment

by:AntonioP
ID: 11875442
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11875499
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
 
LVL 5

Author Comment

by:AntonioP
ID: 11877783
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 11878020
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
 
LVL 15

Accepted Solution

by:
Daydreams earned 250 total points
ID: 11878027
This may be more clear:

This:
url(images\grad2.jpg)

..should be this:
url(images/grad2.jpg)
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11879343
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11880419
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 5

Author Comment

by:AntonioP
ID: 11881284
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 11883217
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 11883795
Page Editor: Maybe the points could be reduced here for me.. 250 for a slash seems too much.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11883868
No way Jose - sometimes it's all about the little things.
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 11884328
You are too generous.. thank you:)
0
 
LVL 5

Author Comment

by:AntonioP
ID: 11885110
Man, it's a regular love-fest going on here... ;)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11885162
It makes up for the lack of wages...
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 11885456
All you need is love:)   ..and a few points here and there lol
0
 

Expert Comment

by:timkamer
ID: 13074918
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now