How to add images with background overlay or gradients

Created by Aaron Refari, Modified on Sat, 14 Dec at 7:18 PM by Ritesh WebDev

First thing to check before continuing in this article is that your website was built by Refari by looking for the 'built by Refari' in the footer of the website. If you see this then this article applies to you :)

Adding overlays to pictures can be incredibly useful not only for keeping images more inline with your colour scheme but also for making text on top of the images appear more legible due to improved contrast ratios.

In the following video we go through some examples to help you use this feature and get the best out of it.

Why We Should Use Background Images with Overlays

Background images with overlays enhance website design by ensuring text remains clear and readable while maintaining a polished, professional look. Overlays also help blend images seamlessly with your brand’s color scheme, creating a cohesive and visually appealing user experience.

Also Read : How to edit content in your Navigation bar and your website footer for Refari websites