I'm creating a website and I am attempting to add a background image to the page that covers the entirety of the page and is responsive, yet I am having difficulty doing so. Whenever I tweak the width and height to match cover the entirety of the homepage, I obviously find that the dimensions don't scale when I move the page to another monitor, or make the window smaller. However, I need to tweak the width and height in order for the image to cover the page. Is there a way I could make the image responsive AND tweak the dimensions to my liking?
#background-image-container {
position: absolute;
max-width: 100%;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: hidden;
z-index: 0;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div id="background-image-container">
<img src="static/images/waco-siege2.jpg" id="background-image" style="opacity: 0.7; display: block;" width="1370" height="665">
</div>
I realize that my code is a mess and some parts may contradict other parts; but this just shows everything I have currently attempted.