How to darken my background-image?

CodePen

I want my text to be readable but the background-image doesn’t help —I don’t want to change it—.

How can I make my text more readable?

Well, U don’t want change the background-image but change her proprieties can help your text be more readable

Here are my suggestions:

Changing the text proprieties:

Font-color: You can make your background and your text more contrasting. If your image is dark choose a color that is more light( like white). Ex:

.content {
      font-color:white;
}

Font-weight: U can also change the weight’s text , this is often used to give importance to the content but can solve u problem. Ex:

.content {
      font-weight: 100;
}

Font-size: A simple change in this propriety can save u. Ex:

.content {
      font-size: 15px;
}

Changing the image proprieties:

You can too modify the opacity the image, his values must be in a range of 0 to 1. How much more near to 0 less visible the image will be. Ex:

.background {
 opacity: 0.5;
}

I put opacity: 0.5; and it looks really bad:

The problem is that my background image has 3 colors (black, white and red) so the font-color: white; isn’t helping. How can I find a contrasting color without experimenting all the time?

1 Like

You could try a linear gradient over the background image.

1 Like