@jakegodsall
Posted
Hi 👋
I see you've been struggling with these background images. It's very difficult to get the positions right when you have to think about so many different screen sizes. I can see you've put a ton of work into it to get the result you've got and I think it really looks great.
I'd recommend in the future if you have one or two images to form a background image to use pseudo elements on the <body>.
body::before {
content: "";
position: absolute;
width: 978px;
height: 978px;
top: -50%;
left: -30vw;
background-image: url('../assets/bg-pattern-top.svg');
}
body::after {
content: "";
position: absolute;
width: 978px;
height: 978px;
bottom: 50%;
right: 30vw;
background-image: url("../assets/bg-pattern-bottom.svg");
}
Hope this helps 😁
This adds the background images and treats them as separate elements that can be styled and positioned individually without altering the semantics of the page, as would be the case adding two <img> elements for example.
Marked as helpful
@jakegodsall
Posted
@jakegodsall Just updated the code snippet here. I copied and pasted the wrong CSS properties from my code editor when writing this up. Sorry for the confusion!
@BirushaNdegeya
Posted
Hello there 👋 @jakegodsall
I really appreciate that you took the time to look at my source code and help me understand those CSS properties and principles better. In my future challenges, I will use those techniques to ensure cleaner code.
Happy coding... 🚀🚀🚀🚀
@jakegodsall
Posted
@BirushaNdegeya You're very welcome! Keep up the great work 😁
