I have been working with ReactJS and on my main page container, I am setting a background image like this:
.opening-container {
background-image: url("../../images/sadaqashdbg.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
The opening-container is the main div that includes all the elements on the page. However, I am facing an issue where the background image is not showing. Even when I set the height to 100%, it still does not appear. But, if I set the height to 1200px or height:100vh, the image starts showing but does not cover the entire page.
Here is an example of how it is structured:
<div className='opening-container'>
<button></button>
<button></button>
<h2></h2>
<p></p>
</div>