@half-cto
Posted
Hi Ijeoma, congrats on finishing this project!
I'm not sure what is best practice (and Your take works as well), but I can share mine.
main {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #19A1AE;
background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
background-position: left 50vw top 45vh, right 50vw bottom 45vh;
background-repeat: no-repeat;
}
I added both pictures to background and set positions. I like this solution since bg pictures are not interfering with flow of page. Hope this helps!!
Marked as helpful
@iamdrmeka
Posted
@half-cto
Can you help tell me how this positioning works?
As well as how it affects the two images?
@half-cto
Posted
@iamdrmeka
You can use background-image: with multiple images seperated by comma
and then you can set background-position: for each image.
background-position: right 50vw bottom 45vh, left 50vw top 45vh;
this positions img1 50vw units from right side and 45vh from bottom, img2 50vw from left and 45vh from top. but you can use any css units for this positioning bacground-position
Since both pictures are set as background they don't interfere with other elements. Hope this clears it up, but let me know if you want some more clarification. Also here is link to my solution
Marked as helpful
