4

So I have an image gallery. Each image is a background-image that stretches across the entire page.

To ensure that every image uses the maximum available width, I give it the following background-size:

background-size: 100% auto;

However, some of the images are taller than the available screen height.

To make sure the image is visible in full (at least using scroll bars), I would need to give the body element the height of the resized background image.

However, there seems to be no way to get hold of the resized background image's height in JavaScript.

Is this true? Do I have to resort to normal image elements after all?

There are many approaches to getting the size of a static background image, like How do I get background image size in jQuery? but they obviously don't apply here.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088

2 Answers2

15

The key is to use the static image's dimensions, calculate the aspect ratio of the image, and then use the actual element's dimensions to figure out the computed dimensions of the resized image.

For instance, lets assume you had the following:

html, body { height:100%; }
body {
    background-image: url('http://placehold.it/50x100');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

The static image's dimensions are 50x100, and it is sized to take up a width of 100% of the body element. Therefore the body element's width would be equal to the resized image's width. If you wanted to calculate the resized height of the image, you would just use the image's aspect ratio. In this case, the image's resized height would be 800px, because (400*100)/50 = 800

EXAMPLE HERE

var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();

Pure JS approach: EXAMPLE HERE

var img = new Image();
img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize(){
    var bgHeight = document.body.offsetWidth * img.height / img.width;
    document.body.style.height = bgHeight + 'px';
}
window.onresize = resize; resize();

The pure JS method is going to be the fastest, as demonstrated by this jsPerf example.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Yup, this worked fine. Here's a jFiddle (using jQuery to get the body's width because laziness): http://jsfiddle.net/NpDbX/ – Pekka Jan 15 '14 at 02:44
  • 1
    Ohh, great minds think alike: we literally arrived at the solution in the same minute :) Yours is nicer though, and listens to resize(), cool. Thanks. – Pekka Jan 15 '14 at 02:44
  • Really? well try to put a relative path in background-image like /path/to image instead of http:// ... – Aymane Shuichi Dec 04 '14 at 10:22
  • This was exactly my issue, and the solution works fine http://stackoverflow.com/a/25430236/2672358 – Aymane Shuichi Dec 04 '14 at 11:19
  • I had to move the `style.height = x` into `setTimeout(function() { #set it here }`. Hope this helps someone. – Joe Eifert Dec 15 '17 at 14:58
1

This worked for me (inside a slider):

<!-- CSS -->
    <style>
        div.img { 
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        div.img:nth-of-type(1) {background-image: url('img.jpg');}
        div.img:nth-of-type(2) {background-image: url('img.jpg'); 
        }
    </style>

    <!-- HTML -->
    <div class-"img"></div>
    <div class-"img"></div>
seanwbarker
  • 11
  • 1