Placing the background images were difficult!

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hi there,

  I used pseudo elements to place my background images so there is no need for media queries or changing values at different screen sizes. You can see my solution here. You might find the code complex to understand as I've used scss, but you should learn just by opening in browser and inspecting elements with dev tools.

  I hope that's helpful.

  12
• 

  James English•620

  @anglicus

  Posted over 4 years ago

  I'm sure there is more than one way to deal with the backgrounds, but here is something I tried using calc. I set the image sizes to 1024px, and then positioned like this:

  For the top circle: left: calc(50% - 1024px); top: calc(50% - 1024px);

  For the bottom circle: right: calc(50% - 1024px); bottom: calc(50% - 1024px);

  Basically this makes it so that as the window gets smaller more of the circle gets pushed off screen, and the edges of the circles will stay in the same relative position to the card as you change the size of the window.

  You can change the 1024 to different values if you want the circles to be closer or farther. Changing the 50% value will also make it so they move a little with respect to the card as you resize the window (I set mine to 55% and 45% instead of 50% just so it felt a little more "alive").

  11