How to Add Both a Background Image and CSS3 Gradient to the Same Element

CSS gradients are used for styling elements. They display smooth transitions between two or more defined colors. But have you ever tried to combine a CSS3 gradient and background image on the same element? If no, then this snippet is for you.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solutions with CSS properties

You can combine a background-image and CSS3 gradient on the same element by using several backgrounds.

In our example below, we set the height and width of our <div> and add a background. Then, we set the background image fallback using the “url” value of the background-image property. Finally, we set a background image and gradient for browsers that can deal with them. Also, set the background-size to "100%".

Example of using several backgrounds on the same element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 150px;
        background: lightgreen;
        background-image: url("/build/images/emojin-01.svg");/* fallback */
        background-image: url("/build/images/emojin-01.svg"), linear-gradient(lightgreen, lightblue);
        background-size: 100%;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Result

You can get a similar result by setting multiple background images. The first defined background image will be on the top, and the last defined one will be on the bottom.

In the following example, we use the "inline-block" value of the display property for our <span> and set its background and background-size. Then, we add background images.

Example of combining a background-image and gradient on the same element with several background images:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        height: 150px;
        width: 150px;
        background: #eb01a5;
        background-size: contain;
        background-image: url("/build/images/emojin-01.svg"), linear-gradient(pink, purple);
        background-image: url("/build/images/emojin-01.svg"), -webkit-gradient(linear, left top, left bottom, from(pink), to(purple));
        background-image: url("/build/images/emojin-01.svg"), -moz-linear-gradient(top, pink, purple);
      }
    </style>
  </head>
  <body>
    <span></span>
  </body>
</html>

If you want the image to be displayed above the gradient, put the URL before the gradient.

Example of displaying the image above the gradient:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .background-gradient {
        background: url('/build/images/logo-color-w3.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
        background: url('/build/images/logo-color-w3.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
        background: url('/build/images/logo-color-w3.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
        background: url('/build/images/logo-color-w3.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
        background: url('/build/images/logo-color-w3.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
        background: url('/build/images/logo-color-w3.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
        height: 500px;
        width: 500px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div class="background-gradient"></div>
  </body>
</html>

In the next example, we set the width and height of the <div> and specify both the background-image and gradient through the background property.

Example of combining a background image and gradient with the background property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        background: url("/build/images/logo-color-w3.png") no-repeat left top, linear-gradient(#F7CFB6, #F08E86);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

In our last example, we combine the background image and gradient in the same way but use the "center" value. Also, we set the background-size to its "contain" value.

Example of combining the background image and gradient:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        background: url("/build/images/emojin-01.svg") no-repeat center, linear-gradient(135deg, lightgreen 0, lightblue 100%);
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>