title: Hiding contents without hiding the div?
body: <p>This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <code>&lt;div&gt;</code> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:</p>
  
  <pre><code>&lt;html doctype etc etc&gt;
  &lt;head&gt;
      &lt;title and meta tags&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;&lt;/div&gt;
          &lt;div id="body"&gt;&lt;/div&gt;
          &lt;div id="sidebar"&gt;&lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <code>&lt;img&gt;</code> tag, or set the <code>background-image</code> property on the header <code>&lt;div&gt;</code>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <code>&lt;div&gt;</code> contained an <code>&lt;h1&gt;</code> element with her website's title, but then this element would have to be hidden so that human users only see the background image.</p>
  
  <p>Although if you were to use the <code>display:none;</code> css property then the entire <code>&lt;div&gt;</code> disappears, including the background. Is there a good way to hide the contents of a <code>&lt;div&gt;</code> without hiding the <code>&lt;div&gt;</code> itself?</p>