Solved

Div background image disappears in Mozilla, not IE

Posted on 2004-08-23
18
29,274 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
This may be more clear:

This:
url(images\grad2.jpg)

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

Expert Comment

by:Epistemo
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 5

Author Comment

by:AntonioP
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
No way Jose - sometimes it's all about the little things.
0
 
LVL 15

Expert Comment

by:Daydreams
Comment Utility
You are too generous.. thank you:)
0
 
LVL 5

Author Comment

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

Expert Comment

by:seanpowell
Comment Utility
It makes up for the lack of wages...
0
 
LVL 15

Expert Comment

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

Expert Comment

by:timkamer
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

762 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

7 Experts available now in Live!

Get 1:1 Help Now