background with image and color

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:

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


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

  /* Permalink - use to edit and share this gradient:,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+ */


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

  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

  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;

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.


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);


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;


Browser Support



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!

Here are some of my favorite website building tools

Thanks for reading the article I hope it was helpful for you. Here are some of my favorite tools that I always use and recommend for website building I hope they will be helpful for you. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission.

Web Hosting: For a new website I like GreenGeeks, I’m using it on this site for over a year now without any problems. They have very affordable plans for beginners and the support is reliable. Their simple setup will get you off and running in no time.

Learn Front End Development: If you want to learn front-end development I recommend Pluralsight, learn from industry professionals. You can try the no-risk 10 days free trial and check the content.

Advertising Network: If you want to increase your ads revenue with Adsense then try using Ezoic, unlike most ad networks it doesn’t need any minimum traffic to get started. It is completely free to use.

2 thoughts on “5 ways to use background image and color together in css”

  1. I hope your post is very helpful for a beginner who has no idea about how to use gradient. I will also use this technic.Thanks, buddy for share your 5 ways to use a background color and gradient color.

    my usable tecchnic:
    #hero-img {
    background: -moz-linear-gradient(to right, #3b5a9b 0%,#5387f4 100%);
    background: -webkit-linear-gradient(to right, #3b5a9b 0%,#5387f4 100%)

Comments are closed.