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

Last Updated : 03 Jul, 2022

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser.

In this article, we will see how to combine a background image and CSS3 gradient on the same element.

Approach: Our task is to combine background-image with gradient on the same element. We can achieve this task by using the background-image, linear-gradient, height, and width properties. Here, we will define a <div> tag that will contain the required styling properties that will help to add the gradient effect to the background image.

Property Used:

height: This property is used to define the height of the image.
background-image: This property is used to set the background image.

Syntax:

For linear-gradient on top of the Background Image:

element {
    background-image: linear-gradient(direction, 
        color-stop1, color-stop2, ...), url('url');
}

For radial-gradient on top of the Background Image:

element {
    background-image: radial-gradient(direction, 
        color-stop1, color-stop2, ...), url('url');
}

Example 1: In the below example, we will see how to combine background-image with the trading effect.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Background Image with Gradient 
    </title> 
  
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <style> 
        body { 
            margin-left: 15px; 
            margin-right: 15px; 
        } 
  
        div { 
            background-image: 
                linear-gradient(45deg,  
                rgba(150, 150, 250, 0.42),  
                green), 
                url( 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
            height: 225px; 
            background-repeat: repeat-x; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
  
    <b><p> 
        Combine background image and  
        gradient on same element 
    </p></b> 
    <div></div> 
</body> 
  
</html> 

Output:

Example 2: In the below example, we will see how to combine background-image with the trading effect.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Background Image with Gradient</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <style> 
        body { 
            margin-left: 15px; 
            margin-right: 15px; 
        } 
  
        div { 
            background-image: 
                linear-gradient(45deg,  
                rgba(160, 140, 250, 0.42), black), 
                url( 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
            height: 225px; 
            background-repeat: repeat-y; 
            width: 220px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
          
        <b><p> 
            Combine background image and  
            gradient on same element 
        </p></b> 
          
        <div></div> 
    </center> 
</body> 
  
</html> 