I am attempting to create the effect of the first section in this site: https://www.bandainamcoent.com/games/dragon-ball-fighterz#
The height of the div is changed on resizing the window so that the background image maintains its aspect ratio and the links positioned on the bottom of the div are still in view.
My current approach only adjusts the width of the background image on resizing. I have a set height on the div just so that the height doesn't collapse in on the content. However, I would like to make it so that the background image determines the height.
.landingPage {
position: relative; //<--This is only here for some absolutely positioned elements in the div
height: 950px;
width: 100%;
background-image: url(../assets/desktopLandingImage.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
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>
Hope this helps!