I'm having a problem with my layout when I set a background-image with CSS. I've looked through Google and SO but couldn't find someone with exactly the same problem, and none of the solutions applied.
What I'm trying to do is create a page with a background image that fills the entire height of the screen. Consider this simple html page:
<html>
<body>
<section class="main-section">
<div class="my-div"></div>
</section>
</body>
</html>
In CSS I have two selectors:
.main-section {
background-image: url("../images/image-hero.jpg");
height:100vh;
}
.my-div {
width:500px;
height:500px;
border-style:solid;
border-color:white;
}
And it works fine, except when I resize the window. If the browser is resized to a value that is less than the div's width and height, scrollbars appear and the content is cut. Here's a 300kb gif that illustrates the behavior.
https://i.imgur.com/fS46akt.gif
I tried changing the height to % instead of vh, auto, tried messing with the minimum-height property using every possible value, tried using the background-size property, and setting different values to all these properties.
What I want to achieve is the following: the background image fills the entire height of the screen while keeping its original aspect ratio, it's ok if it overflows horizontally. When the windows is resized, the background image should resize accordingly (or not, it doesn't really matter) and if it becomes smaller than its contents, they should still be visible after scrolling, instead of cutting and showing white/empty space.
I think I'm missing something really obvious or I'm not using the background-image property as it's intended. Please help.