Question

What I’m trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.

Basically I would like to display two images, both centered, one in background and one in foreground:

• Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
• Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
• It doesn’t matter if it’s a <div> or an <img> tag, as long as they are displaying the images.
• Asume also that the image sizes are known upfront and can be used in CSS or HTML part.

So my question is: is it possible using only CSS or CSS3?

If it’s not possible I will accept the answer that will be as close as possible to my goal.

Examples:

• When the background image is cropped from the top and bottom:

• When the background image when it’s cropped from left and right:

Answer 1

After looking at @Kent Brewster’s answer, I think I could achieve all the requirements of OP.

This doesn’t have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:

<div id='bg'></div>
<div id='fg'></div>

#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(http://i.imgur.com/iOvxJ.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#fg {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: .7;
  background-image: url(http://i.imgur.com/HP9tp.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}