Force div to have the size of background image

Question

When using a background image on a Div I am not able to display the full height of the image, neither using height:auto; or height: 100%. Why so? How can I solve the problem?

I have created a JS Fiddle here: https://jsfiddle.net/2d0npz2v/5/

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: 100% auto;
  height: 100%;
}

<div class="imageContainer2"></div>

UPDATE Just for clarity, the image needs to be 100% width, and auto height (not cut at the bottom). This example works but it's using the "content" property instead of the "background-image": https://jsfiddle.net/j47a6x7s/. I am looking for the same behaviour but without using content.

Solution 1

Well, the reason why this is?

In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.

With the background-image solution, you use a background, which does not use space. The .imageContainer2 element can not know about the height of the background-image AND adapt itself to it.

This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you

Solution 2

If the image(s) you want to display in the background property always has the same aspect ratio, you can use one of the techniques explained here to make the div keep the same aspect ratio as the image according to the width.

With your example it would look like this :

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: auto 100%;
  padding-bottom:178%;
  background-repeat:no-repeat;
}

<div class="imageContainer2"></div>

Note that I don't know what you are trying to achieve exaclty. Using this method to display an image probably isn't semanticaly correct depending on the context.

Solution 3

  var bgImg = new Image();
  bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
  bgImg.onload = function() {
  $('.test').css({'height':this.height,'width':this.width});
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">

</div>

Hope this exactly solves your issue.

Comments

[Sanjay Kumar N S]

height: 100%; is enough rt?

[Praveen Kumar Purushothaman]

@SanjayKumarNS position is needed buddy. Coz there's nothing inside the div.

[MeV]

Thanks @PraveenKumar but no this doesn't work, I cannot scroll to see the full height of the image :-/

[Praveen Kumar Purushothaman]

@MaRco85 So if you wanna have the height of the image, then you need to set the height: as the image's height and not the 100%.

[MeV]

Well, I really believe there is a more generic solution without having to specific the size of it, that's exactly what I was try to find out

[Praveen Kumar Purushothaman]

@MaRco85 I had come across this. Well, there's no way to detect the height of the image when used using url(). Sorry! :)

[MeV]

@PraveenKumar, so why when using "content:url("image.jpg");" the height is detected?

[Praveen Kumar Purushothaman]

@MaRco85 Whatever you do, you can set the height and width relative to boundaries only. In this case, it is the window height. So if you wanna make it to work with the CSS, CSS doesn't have the power to detect the size of the image.

[MeV]

I am grateful for your help but I hope someone can give a solution. If not, your answer will be the accepted one :-)

[Praveen Kumar Purushothaman]

@MaRco85 Thanks buddy. Let's wait and see... I don't think it is possible, coz I am working on HTML / CSS for the past 8 years and I cannot figure this thing out. :)

[Praveen Kumar Purushothaman]

@MaRco85 Do you still wanna wait?

[MeV]

@PraveenKumar yes, I will also open a bounty for this question, there seems to be many options but I cannot achieve what I want to have, see here: stackoverflow.com/questions/18901819/…

[MeV]

Thanks for your answer Dario, but If I am insisting with CSS there is a reason. I cannot set a src for the image (solution1) as I need to replace the image source using media css queries (and load different images for mobile/tablet etc). solution2 is also not good because it's cropping part of image and it is not even the same result as using a simple tag <img> with the src as in solution1.

[Dario Cancelliere]

You are welcome Marco but there is no other solution unfortunately. You have to build media query classes and insert multiple different IMGs that will be hidden depending on device resolution, I can provide to you an example if you need. By the way, the second solution isn't cropping anything, the result is identical to the first solution.

[MeV]

Many thanks @HerrSerker, You are right and the question is actually explaining the same problem.

[MeV]

Thanks web-tiki. I have chosen HerrSerker answer becuse the link he posted is exactly explaining my problem but your answer is also good. What I am trying to achieve is: not use img src, use background-image so I can replace the image sources using CSS media query, but I experienced issues with the height.. and also compatibility with different browsers.

[MeV]

You are actually right Dario, I am sorry I didn't notice the padding-top attribute in the second solution (which is probably the most correct one stackoverflow.com/questions/600743/…). However I cannot use multiple different images otherwise they will all get downloaded (even if they are hidden). Thank you anyway for your answer and patience!

[yunzen]

If you are in charge of the HTML Code, you could set the necessary CSS like background-image, padding-bottom as inline <style> for example. In that case I recommend using an attribute id on the HTML element, which is unique for exactly that element. Something like imagecontainer2-1234 where 1234 is a unique of that element. A different image container could have the id imagecontainer2-2345 and so on.

[MeV]

yes, definitely. thanks for the details! @HerrSerker