5 ways to use background image and color together in css

Have you seen websites using a background image with color, and wonder how they do it?

Well, you are here because you probably want to know how to do it yourself.

If you already know the basic property of CSS background and want to know some advanced methods then I’ll show you 5 different ways to use background with image and color in CSS.

So let’s start:

Basic background image with color

In this method, you can use a simple transparent image as a background image and a solid background color. What that will do is allow you to show the background color from the transparent sections of the image.

Let’s see:

body{
  background:url(image.png) repeat #cfcfe6;
}

Demo

See how the pattern here has mixed with the background color.

Gradient background color

Now we have seen the use of background image with solid color let’s see how to do this with a gradient background color. Again for this method, you have to use a transparent image as the background image.

You can create gradient color manually like this

body {
  background: linear-gradient(green, blue);
}

Or you can use some gradient generator.

Now we have the gradient background let’s add an image with this

body{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,4096ee+100 */
background:url(image.png) repeat, #7abcff; /* Old browsers */
background:url(image.png) repeat, -moz-linear-gradient(top,  #7abcff 0%, #4096ee 100%); /* FF3.6-15 */
background:url(image.png) repeat, -webkit-linear-gradient(top,  #7abcff 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background:url(image.png) repeat, linear-gradient(to bottom,  #7abcff 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Demo

Multiple background images

Do you know you can use multiple images as background image at the same time?

Yes! you can but you have to be careful with ordering when using multiple images. Place the image that will be at the front first and the second one at second and so on.

Let’s see the basic structure

body{
  background-image:url(image1.png), url(image2.png), url(image3.png);
  background-position:50px 0, -50px -104px, left bottom;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

You can also use multiple images with background color here is how

body{
  background-image:url(image1.png), url(image2.png), url(image3.png);
  background-position:50px 0, -50px -104px, left bottom;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-color:#92ddff;
}

Multiple images can be used in a very creative way like the demo below or you can check David Walsh’s blog for making an animation with multiple background images.

Demo

Background image with color overlay

Have you heard of a background image with color overlay?

It’s not a typical method where you have the background color behind the image it’s actually the opposite, which means you have a color over the background image.

I have been saying you need to use a transparent image but this is one of those methods where you can use images with a solid background.

It’s a very effective way to show some image effects. For this, you have to use some CSS pseudo elements.

Here is the CSS:

.block_1 {
  background: url(image.jpg) no-repeat 0, 0;
  height: 200px;
  width: 280px;
  position: relative;
}
.block_1:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

Demo

Background blend modes

Similar to the overlay method background blend method is not typical background image and color technique but background-blend-mode is an advanced method of blending images and color or blending multiple images. CSS blend effect is more like the Photoshop blend effect.

There is a whole list of blend mode you can use

Here is the list:

• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Adobe works on these elements and they have created a pen to play with these blend modes.

You can create some really cool image effects without any image editor.

.block {
  background: url(image.jpg) no-repeat 0, 0 #99e9ff;
  background-blend-mode: multiply;
  height: 200px;
  width: 280px;
}

Demo

Browser Support

Firefox	Chrome	Opera	Safari	IE
30+	35+	22	6.1	None

Conclusion

When it comes to using background image and color together it’s a very common web practice but as the web technology is evolving you should know the advance techniques alongside the basic ones. We have discussed most of the techniques here from very basic to advance level.

So it comes down to your preference when to use which technique. But always remember don’t limit yourself with these techniques only keep playing and exploring you will discover your very own technique.

I hope you liked this article and find it useful. Thank you for reading!

Do you know other techniques for using a background with image and color together in CSS? If you do, make sure you share them in the comments below!