Background image missing from Chrome?

This is peculiar.

I have a .jpg image that appears in every browser except Chrome (Chrome on a PC, Chrome on a Mac, and Chrome on Windows XP with Fusion on a Mac)

I can’t really find anything definitive that talks about why my background image does not appear.

The code matches other code in elements that DO appear.

The background is in my body statement:

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    margin:0px 0px;
    padding:0px 0px;
    background-image:url(../images/BG.jpg);
    background-repeat:no-repeat;
    background-position: left bottom;
    
    }

The URL is here for examination:
http://www.edwardsvilleneighborsinneed.org/joom15/

Any thoughts are appreciated. Sometimes you stare at code so long - you can’t see the forest for the trees!

Thanks!

The back-position:“left bottom:” Does not work when I have a container spanning the whole width of the page.

But - thats the only way I’ve figured out hoe to include the header image on the page the way I want it too.

Here is my original html

<body>
<div id="containerLarge">
  <div id="containerTop">
    <div id="logoTop"><!-- end of logoTop div--></div>
    <div id="logoType">
      <div id="headerRight">
        <div id="searchBox">
          <jdoc:include type="modules" name="search" style="xhtml" />
        </div>
      <!-- end of search div--></div>
      
<!-- end of logoType div--></div>
     
    <div id="menu">
    <!-- end of menu div-->
    <jdoc:include type="modules" name="menu" style="xhtml" />
</div>
    <div id="logoBottom">
    <!-- end of logoBottom div--></div>
    
    <div id="main">
      <jdoc:include type="component" /><!-- end of mainComo div-->
</div>
    <div id="right">
      <jdoc:include type="modules" name="right" style="xhtml" />
</div>

    <div id="footer">
      <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
    <!-- This clearing element should immediately follow the <LAST containing> div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <!-- end of containerTop div--></div>
  <!-- end of containerLarge div-->
</div>


</body>

As soon as I take out the container div:

<body>

  <div id="containerTop">
    <div id="logoTop"><!-- end of logoTop div--></div>
    <div id="logoType">
      <div id="headerRight">
        <div id="searchBox">
          <jdoc:include type="modules" name="search" style="xhtml" />
        </div>
      <!-- end of search div--></div>
      
<!-- end of logoType div--></div>
     
    <div id="menu">
    <!-- end of menu div-->
    <jdoc:include type="modules" name="menu" style="xhtml" />
</div>
    <div id="logoBottom">
    <!-- end of logoBottom div--></div>
    
    <div id="main">
      <jdoc:include type="component" /><!-- end of mainComo div-->
</div>
    <div id="right">
      <jdoc:include type="modules" name="right" style="xhtml" />
</div>

    <div id="footer">
      <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
    <!-- This clearing element should immediately follow the <LAST containing> div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <!-- end of containerTop div--></div>

</body>

It works - but without the header?

So - if I could figure out how to do it another way and retain the header - I’d be gold.

Fixed - I could not have a DIV that did what I was trying to do with the page as a whole. So I rearranged some elements and created a new style.


<body>
<div id="containerLarge">     
  <div id="test"> 
    <div id="logoTop"><!-- end of logoTop div-->
    </div>
    <div id="logoType">
      <div id="headerRight">
        <div id="searchBox">
          <jdoc:include type="modules" name="search" style="xhtml" />
        </div>
      <!-- end of search div--></div>
        
<!-- end of logoType div-->
    </div>
    <div id="menu">
      <!-- end of menu div-->
      <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
  </div>
  <!-- end of containerLarge div-->
</div>

  <div id="containerContents">

    <div id="logoBottom">
    <!-- end of logoBottom div--></div>
    
    <div id="main">
      <jdoc:include type="component" /><!-- end of mainComo div-->
</div>
    <div id="right">
      <jdoc:include type="modules" name="right" style="xhtml" />
</div>

    <div id="footer">
      <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
 
  <!-- end of containerTop div--></div>   <!-- This clearing element should immediately follow the <LAST containing> div in order to force the #container div to contain all child floats --><br class="clearfloat" />


</body>

started browsing the site using Chrome with the element inspector. the bottom of the image seems to be aligning with the bottom of the top header area instead of the bottom of the browser window…so it’s out of view. also, when hovering over the body tag in the html code using the inspector, only that header area is highlighted instead of the whole browser window area…if that makes any sense.

haven’t figured out what’s actually wrong or how to fix this…just thinking out loud…but maybe it’ll give you or someone else a clue as to what’s wrong so you can get the problem fixed.

btw, the same thing is happening in Safari (4.0.4) and Opera (10.62) browsers on PC as well…at least, it is for me.