Hi everybody! I would like some help to make the background like this (ignore the header):
Using this image:
I can create divs and put the image as the background image of each div, but then I would have to adjust the background position for each one. Is there an easier way to do so?
My code is here in codepen: https://codepen.io/danielasegadilha/pen/dyqvNLZ?editors=1100
likely many ways to do it.
however, the easiest way would be to cut it up and save as separate images.
(I would advise this way)
if your just using it as a practice exercise, then:
This one you mentioned you’d tried.
using divs and positioning,
It may be possible to use grid to place items on top of one another, you’d still have some fiddling about with divs to do, but you could try layering divs on top of the Entire image to hide areas.
(this lady has loads of grid vids that might be of interest:
(4) Overlap on the Web, Graphic Design Made Easy with CSS Grid - YouTube )
If you do cut it up grid could also be used to align the images quickly with space between
not sure how else it could be done, possible there is some JavaScript that could be used, but I don;t know any js 
