title: Image slices placed using CSS Divs
body: <p>Right now many of my designs used sliced graphics with absolute positioned DIVs.</p>
  
  <pre><code>&lt;style&gt;
      #Slice-01 {
          position: absolute;
          left:0; top:0;
          width:214px; height:38px;
      }
  &lt;/style&gt;
  
  &lt;body&gt;
      &lt;div id="Slice-01"&gt;
          &lt;img src="/slices/Slice_01.jpg" width="214" height="38" alt="" border="0" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've seen an alternate method where the image is the background of the DIV instead of an object inside the DIV...</p>
  
  <pre><code>&lt;style&gt;
      #Slice-01 {
          position: absolute;
          left:0; top:0;
          width:214px; height:38px;
          background-image: url(/slices/Slice_01.jpg);
          background-repeat: no-repeat;
      }
  &lt;/style&gt;
  
  &lt;body&gt;
      &lt;div id="Slice-01"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The only practical difference I can see is that one can drag the image out of the browser window on the first example but cannot when it's the background image.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>What's the more commonly accepted method and why?</li>
  <li>What are the pros and cons of each method?</li>
  </ol>
  
  <p>Thank-you!</p>