Hi
I want to align the 4 blocks of text exactly under the circles and arrows image in the How does it work section (see share link below). What’s the best way to handle this please? Split the image into 4? Css sprites etc? If sprites, can you explain in laymans terms how I go about this please.
Many thanks.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
green is for Column element
red are divs
blue is an image in a div
orange is a background image of the upper red div, non-repeat and manually shifted to the right.
That’s the structure I recommend, and that should be used because the structure makes sense in HTML, as each column represent an individual piece of content. So you need 7 images: 4 circles and 3 arrows.
Alternatively you can have the orange image be a normal image (not background) with position absolute and manually position, and you can add an interaction to it to animate and/or reveal it.
Also you should just save one image of the circle and have the text in HTML text, over the image, so you really have only 3 images: 1 circle bg and 2 arrows.
Hi @vincent
Thanks so much for explaining this in so much detail. It’s much appreciated and really helpful, cheers.
Graham
