title: CSS Print Stylesheet: hide everything except specific image, show that full-page
body: <p>I'm trying to build a stylesheet that prints only a specific image, and sizes the image to cover the entire page.</p>
  
  <p>In my media="print" stylesheet, I have:</p>
  
  <pre><code>@page { 
      margin: 0.5in; 
  }
  body {
      width: 100%;
  }
  body * {
      visibility: hidden;
  }
  #specificimage {
      visibility: visible;
      position: fixed;
      top: .5in;
      left: .5in;
      width: 7.5in;
      height: auto;
  }
  </code></pre>
  
  <p>The html structure is similar to this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;img id="specificimage" src="image.png" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It prints fine in Firefox 19, but that is the only browser I've tested that works correctly. IE 9 doesn't show anything; Safari 5.1.7 (PC) shows only a sliver of the image on the left side of the page; Chrome 25 shows the full image, but in a small portion of the page.</p>
  
  <p>Anyone know of anything else I can try?</p>