How do you create this same background effect on this page?

Question

Follow the link: enter link description here

Thank you!

Inspect, copy/paste, it's just background size cover with position being top center, just inspect and see — Huangism, Apr 05 '18 at 13:23
you have the name of theme developer also .. you can also write to him if you cannot inspect the code — Temani Afif, Apr 05 '18 at 13:27

score -1 · Accepted Answer · answered Apr 05 '18 at 14:03

Add linear-gradient after the parent container using Pseudo-Element :after starting form the bottom with 100% and fade top 0%.

Check the code below:

body {
  margin: 0;
  padding: 0;
}

.main {
  background-image: url(https://picsum.photos/1280/1000?image=1080);
  background-size: cover;
  background-position: center center;
  height: 100vh;
  position: relative;
  height: 100vh;
  width: 100wh;
  overflow: hidden;
}

.effect {
  width: 100wh;
  height: 100vh;
}

.effect:after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
  margin-top: -100vh;
  height: 100vh;
  width: 100wh;
  content: "";
}

<div class="effect">
  <div class="main">
  </div>
</div>

How do you create this same background effect on this page?

1 Answers1