Responsive DIV scaling within “background-size: contain” image

Question

UPDATED 01/01/15

Problem:

I have a centered background image that is scaling with background-size: contain. I would like to have DIVs (for links, etc.) that overlay on the background and also scale with said background whenever the browser is resized, but also stay positioned relative to that background's size.

In the Fiddle provided below, the red border shows where the navbar should exist and the green border shows where the 'Home' button should be. Resize your browser window as far as you can both horizontally, then vertically -- you should see how the bars do not stay positioned properly over the image at certain extremes.

Update/Progress: I have it scaling appropriately in all scenarios except when the browser is resized to a narrow vertical window. Then the navbar and home DIVs shift downward and don't stay positioned relative to the image.

Fiddle:

Original Fiddle: http://jsfiddle.net/tc4hoLft/

New Fiddle: http://jsfiddle.net/w5xjkj4e/1/

Code:

CSS:

html, body {
    background: #000;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}
.bg {
    height: 100%;
    background-image: url('https://placekitten.com/350/325');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}
.navbar {
    position: relative;
    width: 100%;
    height: 14%;
    top: 75%;
    margin: 0 auto;
    border: 1px solid red;
}
#home {
    position: absolute;
    top: 0;
    left: 21.5%;
    width: 7%;
    height: 100%;
    display: block;
    border: 1px solid green;
}

JS:

$(window).on("resize", function() {

    var width = $('.bg').width();
    var height = $('.bg').height();

    var imgWidth = width > height ? 350/325 * height : width;
    var imgHeight = height > width ? 325/350 * width : height;
    var imgTop;

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
    });

});

Answer 1

I'm actually somewhat close, I think. The only problem I am still having is when I make the browser window very narrow vertically, the DIVs shift down and don't stay positioned properly.

Updated Fiddle here.

I'm resorting to JavaScript to get the actual background image size, then calculating the DIV's size and position based on those results.

$(window).on("resize", function() {

    var width = $('.bg').width();
    var height = $('.bg').height();

    var imgWidth = width > height ? 350/325 * height : width;
    var imgHeight = height > width ? 325/350 * width : height;
    var imgTop; //need to do calculations on this

    $('.navbar').css({
        'width': imgWidth,
        'height': imgHeight * .15,
    });

});

Answer 2

Rather than use background-size: contain, if you can use background-size: cover (without the image degrading too much), then the background image will fill the container completely. Since the percentage positions are relative to the container, they are now also relative to the image. So they now stay much closer to their original positions over the image.

Answer 3

Working Fiddle

By the use background-size: cover; you can achieve that.

html, body {
    background: url("https://placekitten.com/350/325") no-repeat scroll center center / cover #000;
    height: 100%;
    margin: 0 auto;
    min-width: 325px;
    overflow-x: hidden;
    width: 100%;
}

Check this out. Perfect Full Page Background Image

Another solution can be background-size: 100% 100%;

Working Fiddle