retrieve the size of a background image set to “cover”

1
votes

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) ?

2
jquerycssbackground-imagecoverbackground-size
is the div and the image the same size.ie. did you set the image size to fit the div? if possible, please post html and css code of the image.. - Hawk
no, the image is set as background and its size is set to cover, so for different viewports, the image will have different sizes, different visible parts... - Matteo Bononi 'peorthyr'
ok, i think i got you, thanks, let me see what i can do..when you set a background image in a div of 500px by 500px, won't the background-image show only 500px by 500px? the background image size will equal the div size.. - Hawk
I'm half way to a solution. Just a little while more and I'll have a complete one. - ndugger
There was some missing logic that I just added in. Grab the new code from my edited answer. - ndugger

2 Answers

3
votes

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);
}
0
votes

Try this

fetch('https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js').then(response => response.text()).then(text => eval(text)).then(() => {
    
    // i just fetch jquery to get it to work on code snippet
    $(document).ready(function(){
        var bg = new Image();
        bg.src = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
        var ratio = Math.max($('#myDiv').width() / bg.width, $('#myDiv').height() / bg.height);
        var bgW = Math.round(ratio * bg.width);
        var bgH = Math.round(ratio * bg.height);
        console.log(bgW + ',' + bgH);
    });

})
#myDiv {
	width: 400px;
	height: 300px;
	background-image: url('https://secure.static.tumblr.com/ebf8f98b59be30d14a267901c55c628a/woxut3t/YqAom1fhk/tumblr_static_843lnidcun0g0ks4co84gkg4c.jpg');
	background-position: center;
	background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="myDiv"></div>