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%;
}
Related Topics
How to Make Bootstrap 4 Columns Have a Height of 100%
Floating Elements Within a Div, Floats Outside of Div. Why
What Does a Space Mean in a CSS Selector? I.E. Difference Between .Classa.Classb and .Classa .Classb
Set Opacity of Background Image Without Affecting Child Elements
Css Scoped Custom Property Ignored When Used to Calculate Variable in Outer Scope
Css Triangle Custom Border Color
How to Vertically Center Content With Variable Height Within a Div
React.Js Inline Style Best Practices
Safari: Media Query Not Firing At the Expected Width
Why Does Height 100% Work When Doctype Is Removed
Which Characters Are Valid in CSS Class Names/Selectors
How to Prevent Less from Trying to Compile CSS Calc() Properties
Css 100% Height With Padding/Margin