How to Get Div Height to Auto-Adjust to Background Size

How to get div height to auto-adjust to background size?

Another, perhaps inefficient, solution would be to include the image under an img element set to visibility: hidden;. Then make the background-image of the surrounding div the same as the image.

This will set the surrounding div to the size of the image in the img element but display it as a background.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Fit div size to background image

tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript

// **** Problem ****

// Wrong html :
<div class="my_class"><div>

// with css :
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

//****  Solution ****

// use css:
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: contain;
}

Force div to have the size of background image

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

Div with background-image and height auto

You have to declare a valid height for your background div. As Maneesh has said height:auto takes the element content's height.

They key is to specify a height in vh or px.
After that you can easily place your text div inside it and set it
around with either flexbox or position absolute

Check the snippets! :)

CODE WITH FLEXBOX

body {     margin: 0;}
.i-van {   display: flex;   align-items: center;   justify-content: center;   background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg);   background-size: cover;   background-position: center;   max-width: 100%;   height: 100vh;}
#div-inside {   font-size: 100px;   color: white;}

<div class="i-van">    <div id="div-inside">        HELLO    </div></div>

How to auto adjust the div height according to content in it?

Try with the following mark-up instead of directly specifying height:

.box-centerside {  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;  float: left;  min-height: 100px;  width: 260px;}

<div class="box-centerside">  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br></div>

Fit div height to background-image height (with parallax effect)

Use vw instead of vh to have a better responsive and avoid the space under the image. The image is chaging in height keeping it's ratio so you do the same for the div. You can also adjust the position of the image to strat inside that div.

html, body{  width: 100%;  margin: 0;  padding: 0;}
.empty-space-20{  height: 20vh;  background-color: lime;}


.parallax{  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");  background-attachment: fixed;  background-repeat: no-repeat;  background-size: 100% auto;  background-position: 0 20vh;  height: 50vw;}


.empty-space{  height: 1000px;  background-color: coral;}

<div class="empty-space-20">some empty space</div><div class="parallax"></div>
<div class="empty-space">some empty space</div>

How to auto fit the height of a div to its background image?

It's impossible to have an element expand based on the size of its background image.

To resolve this, what I would recommend is to turn the background image into a child <img> element. On this <img> element, specify both the width and height that were previously on your container. Completely omit the height and width from the parent, and the parent will automatically expand to the size of the image.

This can be seen in the following:

.landingPage > img {  width: 100%;  height: 950px;}

<div class="landingPage">  <img src="http://placehold.it/100"></div>

Scale div to fit background image

Let a transparent image dictate the DIV dimensions.

Inside that div put the same image with CSS opacity: 0

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>

set that image to

#mainHeaderWrapper {
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}

That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.

Need some content inside that DIV?

Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
   <div>Some content...</div>
</div>

#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

How to Get Div Height to Auto-Adjust to Background Size