Add a background colour/gradient and a background image to the same block

Several times we have found ourselves implementing designs that have a background gradient and image on the same element, so I thought I would share a simple way to achieve this with Cwicly.

As Cwicly doesn’t yet support multiple backgrounds, we have to find creative ways around this.

This strategy works with any type of Cwicly container block (e.g. Section, Container, Div, etc).


  1. For your block, add a background image (presumably one with some transparent areas)

  2. Set the block’s position to relative (this allows step 3 to work correctly)
    Screenshot 2023-11-08 at 02.36.42

  3. Add an overlay (either a gradient or colour)
    Screenshot 2023-11-08 at 02.37.11

  4. Select the before pseudo element and set it’s z-index to -1 (this targets the overlay)
    Screenshot 2023-11-08 at 02.34.40

Doing this allows us to use a single block.The simple trick here is that usually the overlay sits above the background image - setting its z-index to -1 allows it to sit behind the image.

Hopefully this saves you some time when working with these types of designs.