To dynamically adjust the background size based on window width and height, you can utilize viewport units such as vw and vh with the background-size property.
Check out this Unique JS Fiddle
.bg {
position: absolute;
background: url("//placehold.it/400x200/00AA00/ffffff?text=Coming Soon") no-repeat center center fixed;
background-size:50vw 40vh; /* Added for demonstration */
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color:orange;
margin: auto;
}
<section>
<div class="container"><div class="bg"></div></div>
</section>
Alternatively, you can use percentage values for the background-size property:
background-size:50% 40%;
Explore Another Unique JS Fiddle here
Referencing from MDN - Background-Size:
A <percentage> value scales the background image relative to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area typically includes the content box and its padding or border area. If the background attachment is fixed, the entire browser window acts as the background positioning area
.
Note: The values used (e.g., 50vw, 40vh, 50%, 40%) are for illustration purposes; feel free to experiment with different positive values.
-------------------------------------------------------------------------------
(1) Additional Resources: