Background applied to :before element of css did not get applied to the entire div

Question

The background applied to the div using :before pseudo element did not apply to the entire div. This is the html & css code.

HTML

<section id="pages">
 <div class="container">
  ...
  ...
  ....
 </div
</section>

CSS

#pages {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/background.png);
  background-size: 100% 100%;
  padding: 80px 0 0 0;
  min-height: 100vh;
}
#pages:after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

The form is inside the container div and the pages section extends till the end of the page. I have uploaded the image of the web-page. Click here to see the image

missiing position:relative on #pages – Temani Afif Sep 24 '19 at 13:19 — Temani Afif, Sep 24 '19 at 13:19

score 0 · Accepted Answer · answered Sep 24 '19 at 13:20

You need to add position: relative to the #pages div. So the :after pseudo element is absolute positioned relative to it.

#pages {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/background.png);
  background-size: 100% 100%;
  padding: 80px 0 0 0;
  min-height: 100vh;
  position: relative;
}

#pages:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  height: 100%;
}

<section id="pages">
 <div class="container">
  ...
  ...
  ....
 </div>
</section>

Background applied to :before element of css did not get applied to the entire div

1 Answers1