@aesthete797
Posted
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 helpful
