Best way to have background image between columns and be responsive?

HTML & CSS
1

Hi there,

I have the following layout:

image
image1276×807 44.9 KB

I can create the 1, 2, and 3 columns using Bootstrap or flex, but wondering how I would get the dotted arrows between the columns and then make it responsive.

Can anyone suggest the best way to do this? Could I maybe add them as one background to the wrapper of the columns and then remove them on mobile?

Thanks!

2

I’d probably use :after or :before on the column itself and absolutely place the arrow so that it overlaps the next column. If you give it a suitable percentage width you can stretch the arrow so that it is responsive (background-size:cover).

If the image doesn’t scale well then another option would be to re-draw your arrow image so that it is very long (longer than the bootstrap columns). Then you can show it from the right and let it reveal more of the image on the left as it stretches.

You can then use media queries to remove the background when the columns wrap to vertical.

There are probably loads of other ways to do it also :slight_smile:

1 Like
3

Thanks for the reply and the suggestions, I will have a play around and see how I get on :slight_smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.