@yishak621
Posted
Its very easy and tricky at the same time ...by default The two circular background svg pics are placed in center....so to place them at the desired place u should use transform:translate property it enables the svg to keep them in the position even if u resize the width of the screen .....so how can we do it? well ...first we add the backgrounds as pusdoelements (:after and :before ) and then we will move both of them to the left 50% and to the top 50%
/*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;
}
then if u see in the screen one of the circular svg is in position so we don't touch that we just keep that svg pic in that place(left top) ...
/*adding the top svg before the container*/
.container:before {
top: 0;
left: 0;
background: url('/images/bg-pattern-top.svg') no-repeat ;
}
But what about the other circle ? well its just out of the screen completely ..so we should bring it back to a desired place by moving it 100% to the bottom and 100% to the right ..
/*adding the top svg after the container*/
.container:after {
top: 100%;
left: 100%;
background: url('./images/bg-pattern-bottom.svg') no-repeat ;
}
Marked as helpful
@Dewanshakib
Posted
@yishak621 You are correct.But i am very new at this fleild.I am doing web development since 2 month.So lot to know tnx for your suggestion.
@yishak621
Posted
@Dewanshakib sure keep coding bro i'm also 4 months only in the web dev education ...there are a lot to learn just be open minded and open to know things ...specially these front end mentor website help me to learn a lot of things
@yoga-worksheet
Posted
@yishak621 So far i always curious how to place the background pattern like this. Your suggestion help me a lot! Thanks for your help!
