title: Title-safe covering background image
body: <p>Since a little while we have the awesome <code>background-size: cover</code> and <code>background-size: contain</code> CSS properties.</p>
  
  <p>What I'm looking for is a way to implement a combination of both. Lets call it the 'title-safe' area.</p>
  
  <p>Basically in my background there is on each axis an area that is fine if it disappears/crops if the bounding box is not the appropriate size, but there's an inner area that absolutely must be visible, and we can use letterboxing to ensure this is true.</p>
  
  <p>Some more info:</p>
  
  <ul>
  <li>My background image has a 3:2 aspect ratio.</li>
  <li>For example, this could be 300 x 200px.</li>
  <li>Viewed on a 4:3 screen, this would become 266.66 x 200px</li>
  <li>Viewed on a 16:9 screen, this becomes 300 x 168.75 px </li>
  </ul>
  
  <p>The inner box inside both these 4:3 and 16:9 ratios is an area of 266.666 x 168.75 px. I want to make sure that if people watch the image on other/weirder aspect ratios that inner area remains visible at all times, and I'm calling this the 'title safe area'.</p>