title: Background-image css fails to display in IE7 & 8
body: <p>For some reason I'm having issues displaying a background image in IE 7 and IE8. In IE9 and more modern browsers it works and outputs the following:</p>
  
  <p><img src="https://i.stack.imgur.com/4Tkx1.png" alt="Correct Image"></p>
  
  <p>(The CSS produces the grey bordered elements around the Login)</p>
  
  <p>However in IE7 and IE8 all I get is the following:</p>
  
  <p><img src="https://i.stack.imgur.com/Bu4nM.png" alt="IE8 and 7 display"></p>
  
  <p>I cannot remember having this issue with other sites that I made cross-compatible but then again I try and avoid using images nowadays to save on page load times.</p>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>#contentright .panel {
     background-image: url("/incl/images/bg_panel200.gif");
     background-repeat: no-repeat;
  }
  
  
  #contentright .panelbottom {
  background-image: url("/incl/images/bg_panelbottom200.gif");
  background-position: center top;
  background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>I did a quick Google search and some previous Stack Overflow answers have suggested amending the CSS to the the following format:</p>
  
  <pre><code> background: url('/incl/images/bg_panelbottom200.gif') no-repeat center top;
  </code></pre>
  
  <p>However this doesn't appear to work either.</p>
  
  <p>Thanks in advance.</p>