title: DIV background image not displayed in Firefox and Chrome
body: <p>I'm having a strange problem where my DIV background is not displayed in Firefox and Chrome, but appears perfectly fine in IE. Upon searching on Stackoverflow, I found several similar questions but none of the solutions worked for me unfortunately. </p>
  
  <p>I read in a forum that it might have something to do with browser caching or that I'm using Windows XP. I believe browser caching isn't the problem in my case considering I'm testing my page offline, and the only online testing I've done was right after I uploaded the files. I haven't had the chance to check it on a different Windows platform (e.g. Vista), but even if this problem doesn't occur on Vista, naturally I would like my background image to appear across all platforms.</p>
  
  <p>Please find below, my CSS and source code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
  margin: 0px;
  background:url(../images/bground.jpg) fixed bottom;
  }
  
  .area {
  width:738px;
  margin:0 auto;
  padding:0 131px;
  }
  
  #menu {
  width:738px;
  height:41px;
  position:absolute;
  top:273px;
  text-align: left;
  }
  
  #navlist li {
  display: inline;
  list-style-type: none;
  padding: 0 20px 0 0;
  }
  
  #sec-menu {
  height:41px;
  position:absolute;
  right:131px;
  top:50px;
  text-align: right;
  border-bottom:1px solid #bbb
  }
  
  #sec-navlist li {
  display: inline;
  list-style-type: none;
  padding: 0 0 0 10px;
  }
  
  #register {
  position:absolute;
  right:131px;
  top: 110px;
  }
  
  #content {
  width:1000px;
  position:absolute;
  top:273px;
  text-align: center;
  }
  </code></pre>
  
  <p><strong>Source Code</strong></p>
  
  <pre><code>&lt;body onload="MM_preloadImages('images/register-over.png')"&gt;
  
  &lt;div class="area" style="height:343px; background:transparent url('images/header.png') top no-repeat center; position:relative"&gt;
  
  &lt;div id="sec-menu"&gt;
  &lt;ul id="sec-navlist"&gt;
      &lt;li&gt;&lt;a href="#" class="sec-menu"&gt;International Faculty&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="sec-menu"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="sec-menu"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;a href="#"&gt;&lt;img src="images/register.png" alt="Register for KLVS 2011 Now!" width="91" height="89" id="register" onmouseover="MM_swapImage('register','','images/register-over.png',1)" onmouseout="MM_swapImgRestore()" /&gt;&lt;/a&gt;
  
  &lt;div id="menu"&gt;
      &lt;ul id="navlist"&gt;
      &lt;li class="menu-active"&gt;Home&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="menu"&gt;About KLVS 2011&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="menu"&gt;Programmes&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="menu"&gt;Accommodation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="menu"&gt;Exhibitors &amp;amp; Sponsors&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="menu"&gt;Call for Abstract&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="area" style="background:url(images/transparent-white_12.png) repeat-y"&gt;&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Problem</strong></p>
  
  <p>My <em>'header.png'</em> image is not displayed in the first DIV that uses class <em>area</em>
  Not sure if this is vital information, but I also apply the <em>area</em> class on another DIV calling a different background image, and that background image is displayed fine on all IE, Firefox and Chrome. I've tried removing <code>position:relative</code> and/or <code>transparent</code> from the first DIV but the problem still occurs.</p>
  
  <p>I've also validated my file at <a href="http://validator.w3.org/" rel="nofollow">http://validator.w3.org/</a> and I passed, so now I'm really stumped on what might have caused this. I really hope any kind soul on Stackoverflow could help me with this.</p>
  
  <p>Thank you.</p>