Last Update: 1st Sep 2020.

Check out our most recent premium and free Weebly Templates for 2020.

Last week, we released the latest Weebly theme called Sentient.

Since then, I got some questions related to the background and menu of the theme.

Some clients asked us to add a black transparent background for the menu because it’s hard to see the menu with white text on various backgrounds.

The solution to fix that problem is quite simple, just by changing “Blur” setting or making the background image darker.

I think this solution is helpful for you too. Even if you don’t use our Sentient theme, you might meet this problem: when you add white text on a light background image or header image, the text is hard to read.

You can use the image editing tools Weebly provides to solve the problem. The tools I mentioned are Blur and Darken.

Let’s see an example below.

My background has white text and a light background image so the text is hard to read.

Making the Text on Background or Header Images Stand Out 1

So I increased % of the Blur and Darken of the image to make the text overlaid above it stand out.

Making the Text on Background or Header Images Stand Out 2

The process takes just a few seconds and below is the result.

Making the Text on Background or Header Images Stand Out 3

Look much better, right?

So when you meet the same situation, just apply the same process as I did.

Tips:

1. Don’t make change on both Blur and Darken tool at the same time. Try to make change on one tool first, if it doesn’t work then use the second tool.

2. Try to set the % below 40% of each tool to make the image visible enough.

3. You might want to use the same image for multiple pages, so don’t forget to save all page layouts as the one you’re working on. It’ll save you a lot of time rather than repeat the same steps for multiple pages.

Making the Text on Background or Header Images Stand Out 4

Share This