jquerycssbackground-imagecoverbackground-size

retrieve the size of a background image set to "cover"

Good day all. I have a div, with a background image with its size set to cover.

how do I get the background size with javascript, or jquery?

I mean, the background will fill the div with one of its dimensions, width or height, I would like to understand which are the width and height of the full (Computed) image, not only the visible part.

<style>
body {width:100%; height:100%}
#fullCoverBg {background-image:url("ani_bg.jpg"); background-repeat:no-repeat; background-size:cover; background-position:right;}  

@media all and (max-width : 1000px) {
/* small screens */
aside {height:30%; width:100%;}
#fullCoverBg {height:70%; width:100%;}
}

@media all and (min-width : 1001px) {
/* big screens */
aside {height:100%; width:30%;float:left;}
#fullCoverBg {height:100%;width:70%;float:left;}
}  
</style>    

<body>
<aside>this div stay on head on small devices, and go on the left side on big screens </aside>
<div id="fullCoverBg"></div>
</body>

let's say we resize the wwindow, we will see the background cover the entire div, and of course some parts will be not visible, becouse "cover" fill up the div in its width OR height... for each resize, which are the dimension of the full image (visible and invisible parts) ?

Solution

  • You're gonna want to preload the image.

    var background = new Image();
background.src = "your-image.jpg";

var bgHeight = background.height;
var bgWidth = background.width;

    Alright, here's the real answer. It took some thinking, and some borrowing of code from this answer: How can I determine the background image URL of a div via JavaScript?

    But, I finally got it. I see you wanted a jQuery answer, but I work only in Native, JS, so sorry about the disconnect.

    EDIT: I found some missing logic, so I threw it in. Now it should be good to go, hopefully.

    http://jsfiddle.net/TLQrL/2/ - New link reflecting new logic

    var div = document.getElementById("myDiv");
var style = div.currentStyle || window.getComputedStyle(div, false);
var bg = style.backgroundImage.slice(4, -1);

var background = new Image();
background.src = bg;

background.onload = function() {
    if (background.width > background.height) {
        var ratio = background.height / background.width;
        if (div.offsetWidth > div.offsetHeight) {
            var bgW = div.offsetWidth;
            var bgH = Math.round(div.offsetWidth * ratio);
            if (bgH < div.offsetHeight) {
                bgH = div.offsetHeight;
                bgW = Math.round(bgH / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetHeight / ratio);
            var bgH = div.offsetHeight;
        }
    } else {
        var ratio = background.width / background.height;
        if (div.offsetHeight > div.offsetWidth) {
            var bgH = div.offsetHeight;
            var bgW = Math.round(div.offsetHeight * ratio);
            if (bgW > div.offsetWidth) {
                bgW = div.offsetWidth;
                bgH = Math.round(bgW / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetWidth / ratio);
            var bgH = div.offsetWidth;
        }
    }
    console.log(bgW + ", " + bgH);
}