How get responsive background image size while resize background

Question

I have a <div> with background image like that:

#container {
    background-image: url("../img/bg.jpg");
    background-size: 100% auto;
}

and I have div with Id container

<div id="container"></div>

Here is my css:

#container {
    position: absolute;
    display: block;
    max-width: 1960px;
    max-height: 1960px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url("../img/bg.jpg");
    background-size:100% auto;
}

When i resize browser window my background image scaled too of course, and I want to get height of actual scaled size of my background image with pure js or j query how to do that?

jsfiddle https://jsfiddle.net/cihanzzzz/nqvjLpg9/1/

i need to use backgroun size with cover for see all image in any dimension — Cihan Zengin, Jul 31 '18 at 14:03

Pietro Nadalini · Answer 1 · 2018-07-31T14:07:24.977

0

You can use JQuery like this to get the size of your container:

$('#container').height()

UPDATE:

To get the size of the background image inside your div, you should follow the steps on Vilius Paulauskas answer in this post

edited Jul 31 '18 at 14:07

answered Jul 31 '18 at 13:54

Pietro Nadalini

1,722
3
13
32

it's give to me height of container but i want to get height of background image because background image height change with browser resize – Cihan Zengin Jul 31 '18 at 13:59
[This post](https://stackoverflow.com/questions/5106243/how-do-i-get-background-image-size-in-jquery) has the answer on how to do that – Pietro Nadalini Jul 31 '18 at 14:03
i already look at that here is showing absolute size of bg image i want to get actual size of background image when resize window – Cihan Zengin Jul 31 '18 at 14:47

score 0 · Answer 2 · answered Jul 31 '18 at 14:27

Here is a sample of what I think you are trying to achieve.

var container = document.getElementById("container");

var listener = function (evt) {
  var newRect = container.getBoundingClientRect();
  // you could subtract any bounding padding or margin to get image height
  var newHeight = newRect.height;
  // you could subtract any bounding padding or margin to get image width
  var newWidth = newRect.width;
  
  console.log("new height", newHeight);
  console.log("new width", newWidth);
}

document.body.addEventListener("resize", listener);

#container {
  position: absolute;
  display: block;
  max-width: 1960px;
  max-height: 1960px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
   background-image: url("https://images.unsplash.com/photo-1532976845185-2d8b3fabc79b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a3a29ef330765143527434a0312e7f&auto=format&fit=crop&w=1000&q=80");
    background-size:100% auto;
}

<div id="container"></div>

How get responsive background image size while resize background

2 Answers2