I couldn't figure out how to get the two circles to occupy the top-left and bottom-right corners of the background, while still being responsive. That was the most challenging part for me. Open to any suggestions on how to accomplish that
@dieegofrr
Posted
I give you props Matthew!! Tip: To put the two circles on the background, you can use some background properties. For example:
background-image: url('circle1.svg'),
url('circle2.svg');
background-repeat: no-repeat, no-repeat;
background-position: left -17.75rem top -31.875rem,
right -14.375rem bottom -39.625rem;
If you want, you can see my solution. I hope it helps!!
@visioned
Posted
Hey Matt,
Try placing your images into a div with them set to position: absolute, then play with adjustments for each image on their X and Y axis to place them correctly on the background via top, bottom, left, right.
The bottom svg needs to move down, and left. The top svg needs to move up, and right.
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
