I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work. I even checked for CSS overrides in the browser developer tools, but everything appears to be fine. The div containing the background image is set as col-12 within Bootstrap - could that be causing the issue? Here's a snippet of my CSS:
body, html {
height: 100%;
}
#image-div {
background-image: url("paper.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
color: white;
background-color: rgba(0,0,0,0.5);
background-blend-mode:darken !important;
font-size: 20px;
}
And here's the HTML structure:
<div className="row" id="calculator-row">
<div className="col-12" id="image-div">
<div className="over-image">
<p class="try-calculator">
Calculate the possible return of investments
</p>
</div>
</div>
<div className="col-12" id="calculator-div">
<h1>Return of Investments</h1>
<BenefitCalculator />
<strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
</div>
</div>
**EDIT**: I forgot to mention that I am also using REACTJS.