Home › Updates


Applying a darkening effect to a background image without coding or Photoshop

 November 27, 2017
by Flavio Mester

Our system now allows you to automatically apply a darkening effect to any content block’s background image. This can be very helpful to increase the legibility of text placed on top of a background image in page headers for instance, and eliminates the need to either write custom CSS code or go through a trial and error process with a program like Photoshop to achieve the same result.

For instance, here’s a header without the darkening effect applied to the background image:

Background image
Background image with no darkening effect (default)

After applying a 50% darkening effect, here’s how the same header looks like. Notice that only the background image is darkened; the overlay text remains unchanged:

Background image darkening effect
50% darken effect applied

To apply the effect, select it in the Advanced options of the content block. You can fine tune it as much as you wish – the setting ranges from No darkening (the default) to 90%.

Darken effect dropdown


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn




Top of page