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.