Responsive landing page with position absolute and relative

Community feedback

• 

  Ola•160

  @olamide203Posted almost 4 years ago

  Hi igor, nice work.

  i would suggest you use css pseudo elements ::before and ::after for the background images. for the top background image you can use

  body::before{
                 position: absolute;
                 height: 100vh;
                 width: 100vw;
                 background-image: url("....");
                 background-repeat: no-repeat;
                 background-position: bottom right;
                 transform: translate(-50%, -50%)
       }
  

  then for the bottom background image, it would be something similar with body::after instead of before.

  you can have a look at [my solution] (https://github.com/olamide203/profile-card-component) for a better understanding

  Happy coding!

  0

  ---

  

  Igor Nunes•45

  @igornjPosted almost 4 years ago

  Thx for the help!

  I didn't know yet how to use the ::before and ::after pseudos, its very useful. the only thing that i didn't quite catch yet, was your use of "position absolute" using in the ::before and ::after together:

  .main::before, .main::after{
    width: 100vw;
    height: 100vh;
    position: absolute;
    content: " ";
  

  when i delete it, i see that the images dissapear, but i don't understand why.

  Another problem that i'm facing is that the BGs has a strange flat line on the top here, and as i change the size of the window it continues.

  1

  

  Ola•160

  @olamide203Posted almost 4 years ago

  @igornj the reason why i used position: absolute; was to take the ::before and ::after pseudo elements out of the flow of the HTML so that it kind of overlaps with the entire page.

  also about the strange flat line on the background images, i think that's because of how you positioned them. it should be.

  #main::before {
      background-image: url(./images/bg-pattern-top.svg);
      background-repeat: no-repeat;
      background-position: bottom right;
      transform: translate(-50%,-50%);
  }
  #main::after {
      background-image: url(./images/bg-pattern-bottom.svg);
      background-repeat: no-repeat;
      background-position: top left;
      transform: translate(50%, 50%);
      z-index: -1;
  }
  

  the #main::before should have background-position: bottom right; then we use transform: translate(-50%, -50%); to move it to the correct position.

  then for the #main::after, it should be

  background-position: top left;
  transform: translate(50%, 50%);
  

  I know it looks counter intuitive but, you can have a look at how transform: translate() works here for more explanation.

  Happy coding!

  0