Question

I’m creating a new HTML5 page that has multiple image layers. The first layer is a background layer that is a full screen image (proportional to the screen size).

The second layer is another image object, which I want to be in a fixed position proportional to the first layer; so if I changed the browser size, both of the 2 images would change size so they are proportional one to each other.

Does anyone have any idea how can I do so?

Answer 1

So, let’s suppose we have a “sky.jpg” background image and a “sun.png” image on top of it.

Here’s the HTML(5) code:

<div id="sky">
<img src="sun.png" id="sun">
</div>

And here is the responsive CSS:

#sky {
    width:100%; /* width in percentage, so it will adapt to user's screen */
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */
    background:url(sky.jpg) top center no-repeat;
    text-align:center; /* #sun will be centered, not sure it's what you need */
    background-size:cover;
    -moz-background-size:cover;
}
#sun {
    width:15%; /* adjust it to the needed ratio */
    max-width:300px; /* max-width will prevent it from being bigger than the original image */
    min-width:20px; /* min-width is optional */
}

Live demo (resize the window)

---

Notice the background-size property set to cover (more info here).

It means that the aspect ratio will be preserved to the smallest size such that both its width and its height can completely cover the background positioning area.

That’s why you need an image bigger than most of resolutions (if it’s a body-background image).

Other possible values for this property are “contain” and “auto” (have a look at the specs).

background-size:cover; is not supported by IE8 (that’s why we still add top center for background positioning) and for some FF versions you’ll need a vendor prefix (-moz-)

---

Now you can set a width in percentage for #sun, so that it’ll keep a ratio to its containing div. To prevent it from becoming bigger than the original size, you can set a max-width (and eventually a min-width).

The height of the image will auto-adjust in modern browsers.

---

If you don’t want a fixed height on #sky, be sure that its container also has a height different than auto (the default value).

For example, if #sky is your page background image, you’ve to set:

html, body { height:100%; }
#sky { height:100%; }