Submitted almost 2 years ago

Profile card component

Hugo Almeida•730

@almeida883

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I need your help! I can't finish the exercise, the background doesn't stay static and I can't put an internal shadow on the blue patterned image at the top, can you help me? Grateful!

Community feedback

yishak abrham•2,150

@yishak621Posted almost 2 years ago

Add svg backgrounds as a psudoelements

/*psuedo elments*/ 
 .container:before, 
 .container:after { 
   position: absolute; 
   content: ''; 
   width: 100vw; 
   height: 100vh; 
   background-size: auto; 
   transform: translate(-50%, -50%); /*to the left and top*/ 
  
   z-index: -1; 
 } 
 /*adding the top svg before the container*/ 
 .container:before { 
   top: 0; 
   left: 0; 
   background: url('/images/bg-pattern-top.svg') no-repeat bottom right; /*to expand to bottom and right*/ 
 } 
 /*adding the bottom svg after the container*/ 
 .container:after { 
   top: 100%; 
   left: 100%; 
   background: url('./images/bg-pattern-bottom.svg') no-repeat top left; /*to expand to top and left*/ 
 }

Marked as helpful

Hugo Almeida•730

@almeida883Posted almost 2 years ago

@yishak621 Thanks for your help! Grateful!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord