Cover images

Cover images use a semi-opaque overlay to make text legible.

How to add a cover block

  • search for "cover" when adding the block
    search for “cover” in blocks
  • choose overlay colour and opacity
    set the overlay colour and opacity
  • Cover - upload an image or video file, or pick one from your media library
    add the background image

What if you don’t want an overlay?

chocolate eyeball

Use custom CSS to make sure cover images have enough contrast

Adding an outline, even just 1px,
means you can get rid of the overlay and still have good contrast

.outline{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #281F11;
}

outlines may show the font geometry

A shadow can work too.

.shadow {
  color: white;
  text-shadow:
   -1px -1px 0 #004466,  
    1px -1px 0 #004466,
    -1px 1px 0 #004466,
     1px 1px 0 #004466;
}

You can use a semi-opaque background behind the text


.semiopaquebackground {
  background: rgba(40, 31, 17, .7);
}

The last number in the rgba, .7, is the level of opacity. 0 is transparent and 1 is opaque.

Convert hex colours to rgba using hexrgba.com.

Check that the semi-opaque background is providing enough contrast by using a contrast analyser to sample the colours developer.paciellogroup.com/resources/contrastanalyser/