Side-by-Side Background Images

Side-by-Side Backgr. Images

On small screens the middle image will cover the two other ones. Which image covers the others can be decided by arranging the sequence of the images on the Styles pane -> Design tab. The one at the top of the list covers the other two.

Side-by-Side Background Images

The pictures are sitting as background images in the container .multiple-bg. This container needs a fixed pixel height (not %) and position: relative. The text-layer inside it has to have position absolute. If this is not properly observed, the parent container will 'collapse' (lose its height), and any contents lower on the page will slide up behind it and be invisible.

Adding the background images is straightforward. You will be able to see if a gap appears between the images, and to rectify it you either make the images a little wider, of you narrow the wrapping container a bit.

Placeholder Picture

Download this component