Title-safe covering background image - css

Question

Since a little while we have the awesome background-size: cover and background-size: contain CSS properties.
What I'm looking for is a way to implement a combination of both. Lets call it the 'title-safe' area.
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.
Some more info:
My background image has a 3:2 aspect ratio.
For example, this could be 300 x 200px.
Viewed on a 4:3 screen, this would become 266.66 x 200px
Viewed on a 16:9 screen, this becomes 300 x 168.75 px
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'.

Answer 1

You can have 3 separate styles, and change them with media queries based on the aspect ratio
I have also changed the border color so that it's easy to know which style applies
html, body {
height: 100%;
}
.test {
width: 90%;
height: 90%;
border: solid 2px black;
margin: auto;
background: url(http://i.stack.imgur.com/ZmhEE.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* changed by media queries */
}
#media screen and (min-aspect-ratio: 16/9) {
.test {
border: solid red 2px;
background-size: auto 120%;
}
}
#media screen and (max-aspect-ratio: 4/3) {
.test {
border: solid green 2px;
background-size: 120% auto;
}
}
<div class="test"></div>

Answer 2

I figured it out.
Take the following example for a html document:
<div class="container">
<div class="inner">
</div>
</div>
The inner css class will get a background-image that's always in the 3:2 aspect ratio.
The container has the following CSS rules. Note that the width and height are static here, but they can have any value, including percentages You can tweak them to ensure that the system works.
.container {
width: 900px;
height: 450px;
overflow: hidden;
}
Then the inner css needs the following rules to behave correctly:
.inner {
/* Set the background image. Must be 3:2 aspect ratio! */
background-image: url('background.jpg');
/* Fill up the container.*/
width: 100%;
height: 100%;
/* This is the default in any browser, but many people set it to
border-box these days for every element. It must be "content-box"
for this to work. The key thing here is that the width/height
cannot include the padding.
*/
box-sizing: content-box;
/* Normal CSS contain behavior */
background-size: contain;
background-repeat: no-repeat;
/* Always go to the center */
background-position: center center;
/* This will cause the background to extend beyond the content and
into the padding.
*/
background-clip: padding-box;
/* These numbers are just based on trial and error and not exact.
I tried to figure it out with Math, but my math was wrong. These
are fairly close approximations.
Effectively the width + the padding becomes the total 3:2 image
and the total image MINUS the padding = the title safe area.
*/
padding: 6% 8% 6% 8%;
/*
These margins ensure that the image is still centered.
The overflow:hidden on the container element make sure that
there's no scrollbars.
*/
margin-left: -8%;
margin-top: -6%;
}