Adding Element overlay color

With a few easy steps, you can add an overlay color to your 'Hero image' element, giving the image a tint or making a light image a bit darker so that the text on top will be more visible.

Start by going to the color picker tool website:

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

 

  1. First set the main color in hexadecimal, RGB or by using the color sliders (maybe the main color of your website, an accent color or simply black).
     
  2. To set the transparency of the overlay color, drag the slider to the degree you wish it to be.
     
  3. Copy the RGBA code at the top right, and paste it into the 'Element color overlay' field in the 'Hero image' element.

 

The code should look like this:

 

The difference on the front end could look like this: