1

i am using reactjs and in my main page container i am setting a background image as such:

.opening-container {
  background-image: url("../../images/sadaqashdbg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

and the opening-container is the main div and includes all the elements on the page, however when the bg image is not showing, and when i put height:100% it still does not show, but when i put height:1200px; or height:100vh it starts showing but not covering whole page also

example:

<div className='opening-container'>
<button></button>
<button></button>
<h2></h2>
<p></p>
</div>
ayjammoul
  • 11
  • 2
  • 1
    Hi and Welcome to SO. please take the [tour](https://stackoverflow.com/tour) first. Then read [how to ask questions here](https://stackoverflow.com/help/how-to-ask). After you have done that, edit your question to meet those guidelines and to include a [minimal, reproduciable code snippet](https://stackoverflow.com/help/minimal-reproducible-example) including your HTML aswell. – tacoshy Jun 22 '21 at 11:07
  • what's the content of your `opening-container` element? An element will have a size of 0 if there is no content (and a background-image is not content, it's just a background) – cloned Jun 22 '21 at 11:09
  • the opening-container has buttons and texts – ayjammoul Jun 22 '21 at 11:17
  • Have you tried ``width: auto;`` for the ``.opening-container``? – Rohit Mittal Jun 22 '21 at 11:20
  • its not about the width but the height, and yes i tried it @RohitMittal – ayjammoul Jun 22 '21 at 11:21
  • tried ``background-size: auto;`` instead of ``cover``? – Rohit Mittal Jun 22 '21 at 11:25
  • yup tried that too, however i think the problem is that the opening-container is not full screen, like even though i have elements in it, it is taking a with of 0, that's what i think idk, and idk how to fix it @RohitMittal – ayjammoul Jun 22 '21 at 11:29

1 Answers1

0

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly. so you should specify your parent box height or use vh or px.

habib khademhosseini
  • 1
  • hey thank you, however the containing box has elements inside, shouldn't the height be automatically set – ayjammoul Jun 22 '21 at 11:16