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,
    });

});

daveycroqet · Accepted Answer · 2015-01-01T22:58:37.090

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,
    });

});

GuyH · Answer 2 · 2015-01-01T02:27:39.350

0

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.

edited Jan 01 '15 at 02:27

answered Jan 01 '15 at 02:22

GuyH

786
1
4
8

Thank you for the response, but ``cover`` is unusable with the image dimensions and suffers from the exact same issue as ``contain`` with extreme resizes. Besides, when it comes to a navigation bar, you can't just have things "close"... you need pixel precision, otherwise buttons don't link to the appropriate things! :-) – daveycroqet Jan 01 '15 at 02:32

Aamir Shahzad · Answer 3 · 2015-01-01T05:30:21.203

0

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

edited Jan 01 '15 at 05:30

answered Jan 01 '15 at 05:23

Aamir Shahzad

6,683
8
47
70

1

Again, ``cover`` and ``contain` have very different functionality. This is not even remotely close to what I asked and is simply a repeat of the above two answers. Additionally, it doesn't even work, because if you resize the browser, the DIVs do not scale appropriately at all with the image. – daveycroqet Jan 01 '15 at 05:35
Did you tried `background-size: 100% 100%;` with `contain`? I did checked cover functionality while resizing in the browser it was working fine in firefox for me. What browser you are using ? – Aamir Shahzad Jan 01 '15 at 05:50
Yes, I tried those. Apply your settings to my Fiddle. The differences are obvious. I don't want a full screen, covered background image. I want a contained image scaled appropriately with the ability to overlay DIVs and have them stay in position relative to the scaled contained background. – daveycroqet Jan 01 '15 at 06:21
Can you please add snapshot of the issue in the question with the details. I am not clear what actually you want. Thanks – Aamir Shahzad Jan 01 '15 at 11:10
2

I want overlay DIVs to stay positioned relative to the size of the background image using ``contain``. Only using ``contain``. Not ``cover``. Not ``100%``. Only ``contain``. – daveycroqet Jan 01 '15 at 22:45

Responsive DIV scaling within "background-size: contain" image

Problem:

Fiddle:

Code:

3 Answers3

Linked