Force div to have the size of background image - html

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.

Answer 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

Answer 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.

Answer 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.

Answer 4

Try giving these three to your .imageContainer2:
.imageContainer2 {
position: fixed;
width: 100%;
height: 100%;
}
Fiddle: https://jsfiddle.net/jsse9yL3/

Answer 5

You have to use an IMG for do that. Why you are insisting using CSS?
Example:
.container img
{
width: 100%;
height: auto;
}
<div class="container">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>
You can't calculate the background-image height with a CSS rule and then make the DIV height's equal.
The closest solution for your problem is using a background-cover with all the related "issues".
UPDATE
Another CSS solution could be the padding-trick way, as follows:
.container
{
background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */
}
<div class="container">
</div>
I suggest anyway to use the first solution.

Answer 6

You can use:
.imageContainer2 {
overflow: hidden;
position: relative;
background-repeat: no-repeat;
background-position: 50%;
margin: auto;
min-height: 100vh;
background-size: cover;
}

Answer 7

Try to:
body {
padding: 0px;
}