title: CSS: How to set container size equal to background image size
body: <p>I know how to stretch background image to fit its container (with <code>background-size</code> property). But how to achieve the other way around without setting width and height manually?</p>
  
  <p>To better make my point, assume we have a <code>p</code> element with one line of text and set its background-image to an picture of 800*600px. How to adjust the width and height of <code>p</code> <strong>automatically</strong> to 800*600? </p>
  
  <p>I ask the question because I am looking for a better workflow. It's quite annoying to change width and height in CSS every time I change the image size in Photoshop. The workflow is like below: </p>
  
  <ol>
  <li>Change image in Photoshop (likely end up with a slightly different image dimension) </li>
  <li>Remember that new dimension </li>
  <li>Go into CSS file looking for that particular element which uses that image as bg</li>
  <li>Change width and height of the element (if i still remember them correctly..)</li>
  </ol>