View Full Version : Firefox not displaying background image

03-29-2006, 11:39 AM
My new theme for http://jakpea6.mybesthost.com/ displays perfectly in Internet Explorer however in Firefox the large background image between the header and footer just won't show up. The background image is set as a property in CSS for a Div called 'page' that surrounds 2 other divs 'content' and 'menu' which are floated left and right respectively.

.page {
width: 700px;
background: #000000 url(images/body.jpg);

<div class="header">
Header Stuff
<div class="page">
<div class="content">
<div class="posttitle">
<div class="postcontent">
<div class="postdetails">
<div class="menu">
<div class="menuheading">Heading</div>
<div class="menuitems">Items</div>
<div class="footer">

That's some of the HTML code where those divs are layed out (I've removed all the Wordpress code to make it easier to see)

I've validated my CSS (except for some small recommendations such as I haven't specified a color where there is a background color etc. which wouldn't cause this error)

I tried to validate my HTML but it didn't validate but the only things that were wrong that showed up were stuff from the banner ad my server puts on the top of the page and some code they put at the bottom so it seems the problem isn't with my code being 'non-standard' or anything.

I just don't know why Firefox doesn't display the background image, it's obviously handling the div alright because the page is layed out correctly and only the image is missing.

03-29-2006, 11:55 AM
its not that bg isnt shown, that div is not there ;)
if you floated everything inside, that div is empty, see? and since it has no height set, why would it show?

Bill Posters
03-29-2006, 11:56 AM
I don't think it's a float issue.
Using the Web Dev toolbar in FF, it's possible to see that the element with class .page has a 'physical' height.

I think the problem is much simpler.
From what I can tell, there doesn't seem to be a filed called body.jpg in your images directory.
If IE is showing the image, my guess is that it's reading it from the cache, whereas FF seems to be looking where you tell it to look.

If you do a hard-refresh in IE (Ctrl+F5), it's likely that the background will stop showing in that browser as well.

03-29-2006, 12:26 PM
Bill, you're wrong about the height. DOM Inspector in Firefox shows a computed height of 0px for the div that's supposed to have the background image.

For reference, that would be the div with class set to page below:
<div class="header">
My Blog</div>
<div class="page">
<div class="content">

Bill Posters
03-29-2006, 12:31 PM
Fwiw, I used the web dev toolbar to highlight the element with the page class and it showed me a box which extended beneath the fold; more than enough space for a background image to show through.
Perhaps the web dev toolbar works slightly differently to FF's internal engine (though that would seem odd).

Just double-checked using the Edit CSS facility within the Web Dev toolbar and it seems you're correct. There's no height.
Odd (frustrating and unhelpful), that two aspects of the web dev toolbar see the page differently.

Either way, there's still no body.jpg file in the images directory, so the solution would be a little from 'Column A' and a little from 'Column B'. ;)

03-29-2006, 12:41 PM
Bill's right: no image called body.jpg in the images directory.

By the way: you might want to close up that open directory... :eek:

If you assign a reckonizable background color to that div, it should be appearent whether or not it collapses.

03-29-2006, 01:22 PM
I did apply a background color (black) to that div to see if it would show up but it didn't. Also there is a body.jpg in the same folder as the other images as it locates the images from the index.php that is in the themes folder not directly from the index.php that calls the theme.
ie. The images are in
jakpea6.mybesthost.com/wp-content/themes/Theme 2/images/

You'll notices that there is no header, post, menu or footer .jpg's in that images folder but those seem to be alright as the are located in that first directory in which there is a body.jpg.

I guess the problem is that in Firefox it's reading the height as 0 (which doesn't make sense because all the text content in that div is showing up fine.)

03-29-2006, 01:43 PM
:D rofl
whether image is linked or not, i usually check with information/document size
that shows all linked stuff, external scripts, images and all.

if i outline all block level elements, and switch on information/show el.info, i cant find that div anywhere. theres nothing between #content and body

give that div min-heigth:600px; and see what happens (not that it is a solution)

03-29-2006, 01:46 PM
If you float all the content of a div, then that div will have a height of ZERO. Is this what is going on?

03-29-2006, 03:28 PM
to see if it would show up but it didn't

If you float all the content of a div, then that div will have a height of ZERO Yeah, that seems to be the case.
Either include clearing, non-floated content after the floated stuff, be it generated (not for IE) or "self-inflicted" ( ;) ), or float the div itself.
Some other options and IE7-related info can be found at 456 Berea Street (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/).

Ah, there it is (http://jakpea6.mybesthost.com/wp-content/themes/Theme%202/images/body.jpg)! :D

03-30-2006, 07:30 AM
What IU don't get is I have another theme created much the same way but it doesn't have this problem, so does anyone have a possible solution?

03-30-2006, 12:19 PM
Any problem with adding a div with style "clear: both" after your floated content, but still in the main div?

03-30-2006, 01:35 PM
I have a clear both in my CSS for the Footer Div if that's what you're asking.

04-03-2006, 09:07 AM
I still don't know how to fix it, does anyone have a simple answer for me?

04-03-2006, 09:35 AM
Not everything is simple about web design. I suggest you go read up on CSS and try to understand it better. Your footer is clear:both; but its not effecting anything because its not even in your main container.

</div> </div>
<div style="clear:both;">&nbsp;</div>
<div class="footer">
<div class="footer">Footer</div>
There is your simple answer. You need to at least try next time. If you did try I don't think you tried hard enough. Many times CSS and HTML is trial and error in the beginning.

03-25-2009, 09:36 AM
If you have a wrapper DIV in which every thing is floating then you get the outer DIV to be empty
so the background image will not display in Firefox / chrome

there are some possible solutions you can try

1. add <div style=‘clear:both’></div> before the end of wrapper DIV
2. add overflow:hidden; to wrapper DIV
3. add display:inline-block; to wrapper DIV

05-05-2009, 02:41 PM
I just registered to say thanks to yasirmturk for providing the answer and explanation to this problem. "Each one teach one" is a good maxim to live by.:thumbsup: