Background modal at 100% not filling the screen-CodePudding

I'm trying to create a background modal that's supposed to fill the entire height of the page. The modal only fills about half the page, around 950px (which is the 100% viewable portion). Tried to change the units, tried using calc, used wrapping components.

P.S. When the modal is called by JS the display changes from none to block

#modalBackground {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.7);
  z-index: 10;
}

<body>
  ...stuff
  <div id="modalBackground"></div>
  ...stuff
</body>

CodePudding user response：

Have you tried using position fixed instead of absolute? If you want modal to take the whole screen. I think position fixed makes more sense.

CodePudding user response：

With position: absolute you position an element relative to its closest positioned ancestor. We can't see the rest of your code but you probably have your modal inside another element that is positioned and so it can only fill that element's area.

To get the behaviour you want, position: fixed is more appropriate. This positions the element relative to the viewport:

#modalBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.7);
  z-index: 10;
}

<body>
  ...stuff
  <div id="modalBackground"></div>
  ...stuff
</body>

CodePudding user response：

Try to make the container as a default position, which is static. Then set the max-width to 100vw as it will expand the container to the width of the screen, while the image itself is set to 100% which will respect the width of the screen as well. Additionally, I find setting aspect ratio a good practice, especially if your dynamic site accepts different images with different aspect ratio.

#modalBackground {
    max-width: 100vw;
    aspect-ratio: 16/9 (Your prefered size);
    object-fit: cover;
    object-position: center;
    background-color: rgb(0 0 0 / 0.7);
    z-index: 10;
 }

Hope this helps!