Categories
CSS

How to combine a background-image and CSS3 gradient on the same element?

Spread the love

Sometimes, we want to combine a background-image and CSS3 gradient on the same element.

In this article, we’ll look at how to combine a background-image and CSS3 gradient on the same element.

How to combine a background-image and CSS3 gradient on the same element?

To combine a background-image and CSS3 gradient on the same element, we use the background property.

For instance, we write

body {
  background: url("IMAGE_URL") no-repeat left top,
    linear-gradient(#eb01a5, #d13531);
}

to set the background property to the background imae URL with url("IMAGE_URL").

And we add the gradient with linear-gradient(#eb01a5, #d13531).

Conclusion

To combine a background-image and CSS3 gradient on the same element, we use the background property.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *