Coding Newbie

Change Background Image Color Fast And Easy With This Simple CSS Trick – No Photoshop needed!

CSS allows us to quickly and simply change and edit our background image color, without the need to edit the photo in programs such as Photoshop, Figma, etc.

And to achieve this, we will use just one, simple command. So, let’s see how to achieve it.

Set Up Image Background

Firts, we need to set up the background image. We can go to pexels.com, and find one.

After picking an image for background, I want to set it to cover the entire body section, and we do not want it to repeat itself:

body {
    background-image: url(pexels-aarti-vijay-2693529.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

And here is the result, we have added the background image:

background image pexels-aarti-vijay-2693529.jpg

Perfect. Now, let’s continue to actual image editing.

Old Complicated Ways

We always tend to adapt our images to be inline with our website theme color.

If our website main color is orange, or green, we want to put that color overlay over the image, so it fits nicely with our webpage design.

There are multiple ways to achieve this. Whether to edit the image in image editing software like Photoshop, or to create another element which will cover our background image, and then assign that element targeted color, add some opacity, etc… And both ways are far complicated than the one we will use.

We just need one CSS neat little command for this…

The Solution

We will use CSS background-blend-mode property.

What is background-blend-mode property?

The background-blend-mode defines the blending mode of each background layer (color or image).

How to set it up?

First, we define the background color we wish to use on our image.

Second step is to define the value for background-blend-mode property. You can see all the values for blending property listed at W3Schools.

body {
    background-image: url(pexels-aarti-vijay-2693529.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: cyan;
    background-blend-mode: darken;
}

We have added the background color of cyan to our image. However, it won’t be visible at all due to actual background image.

When we add a darken mode, we get the effect we want, with our color layer blending with our image:

background-blend-mode darken

If we need a light cyan background, we will just use background-blend-mode: lighten mode:

background-blend-mode lighten

We can also use linear gradient for some nice color effect:

body {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to right,blue 0%,orange 100%), url('pexels-aarti-vijay-2693529.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}
background-blend-mode darken with linear gradient

Conclusion

And there you have it, simple and easy command, to quickly edit your background images and make them fit your website theme. No need for additional elements and complicated code, or using Photoshop and similar software.

If you wish to learn more about CSS and why CSS is important language to understand, you can read it in the article What is CSS and why is CSS so important?

%d bloggers like this: