Appearance
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.
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 define both the background image and the gradient in a single background-image property using a comma-separated list. Finally, we set the background-size to "100%". Note that background-size applies to all layers unless you specify a different size for each layer (for example, cover for one layer and 100% for another).
Example of using several backgrounds on the same element:
Example of using several backgrounds on the same element
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 150px;
width: 150px;
background: lightgreen;
background-image: url("https://www.w3docs.com/build/images/emojin-01.svg");
background-image: url("https://www.w3docs.com/build/images/emojin-01.svg"), linear-gradient(lightgreen, lightblue);
background-size: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Result
<div> </div>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:
Example of combining a background-image and CSS3 gradient on the same element with several background images:
html
<!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("https://www.w3docs.com/build/images/emojin-01.svg"), linear-gradient(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:
Example of displaying the image above the gradient:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.background-gradient {
background: url('https://www.w3docs.com/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:
Example of combining a background image and gradient with the background property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100%;
height: 100px;
background: url("https://www.w3docs.com/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:
Example of combining the background image and gradient:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100%;
height: 100px;
background: url("https://www.w3docs.com/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>