Design comparison
Solution retrospective
I have no idea how to fix background images. Can someone explain why are they rotating when resizing.
Community feedback
- @aesthete797Posted over 1 year ago
So when i did mine, i learnt you could control two objects with the background-position property. like so: background-position: -400px -400px, 700px 400px;
body { display: flex; margin: auto; justify-content: center; padding: 100px; background-image: url(bg-pattern-top.svg), url("bg-pattern-bottom.svg"); background-repeat: no-repeat; background-color: hsl(185, 75%, 39%); background-position: -400px -400px, 700px 400px; background-origin: content-box, padding-box; font-family: "Kumbh Sans"; }
"background-image" sets two background images for the container, one at the top and one at the bottom.
"background-position" specifies the position of the background images. the first value "-400px -400px" refers to the position of the first background image, which is shifted 400 pixels to the left and 400 pixels up from the top left corner of the element. The second value "700px 400px" refers to the position of the second background image, which is shifted 700 pixels to the right and 400 pixels down from the top left corner of the element.
"background-origin" specifies the origin of the background images, either from the content box or padding box.
i adjusted the background-position when i got to mobile width (@media query) until it looked okay.
hope this helps.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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