Is it Possible to Set Equivalent of a src Attribute of an img tag in CSS ?

Last Updated : 05 Jun, 2023

In this article, we are going to see if it is possible to set the equivalent of an src attribute of a <img> tag in CSS. The main objective is to find an alternative that will replace the src attribute in the <img> with something which will do the equivalent work but with CSS. There are two approaches that are prevalent, one is using the content and then the url() function. The other is the background/background-image property followed by the URL of the image. In the first property, there is one drawback, it might not work in some older versions of Firefox and Internet Explorer but the second approach is versatile and will work in every browser almost seamlessly.

content property: It is used to generate the content dynamically (during run time) i.e. it replaces the element with generated content value. It is used to generate content ::before & ::after pseudo-element.

Syntax:

img {
    content: url();
    ...
}

background/background-image property: The CSS background property can use to define the background effects for elements. The background-image property is used to set one or more background images for an element

Syntax:

img {    
    background: url();
    background-image: url();
}

Properties used:

content: This property is only applied to an image tag and it only takes the URL of the source of an image.
background: This property is used to add anything to the background of an element, like a color or an image URL or the number of times it can repeat, etc.
background-image: This property can only set the image to the background of an element.

Example 1: The code demonstrates the implementation of the first approach which is using the content property to add the URL of the source to the image that will be used.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Is it possible to set the equivalent of a 
        src attribute of an img tag in CSS? 
    </title> 
    <style> 
        body{ 
            font-family: Georgia,  
                        'Times New Roman', 
                        Times, serif; 
            margin: 1rem; 
        } 
        .image { 
            content: url( 
'https://media.geeksforgeeks.org/wp-content/uploads/20210702175749/20210702175652.gif'); 
            height: 350px; 
            width: 400px; 
            margin: 1rem;    
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; 
               margin-bottom: -1rem"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        <b> 
            Is it possible to set the equivalent of a 
            src attribute of an img tag in CSS? 
        </b> 
    </h3> 
    <img class="image" alt="gfg_img" /> 
</body> 
  
</html>

Output:

Example 2: The example demonstrates the implementation of the second approach which uses the background/background-image property to add the URL of the source to the image that will be used:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Is it possible to set the equivalent 
        of a src attribute of an img tag in CSS? 
    </title> 
    <style> 
        body 
                { 
            font-family: Georgia, 'Times New Roman',  
                            Times, serif; 
            margin: 1rem; 
        } 
        .image { 
            background-image: url( 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220512131412/Student-Chapter-Article-Banner.png'); 
            background-repeat: no-repeat; 
            background-size: 40rem; 
            display: inline-block; 
            height: 350px; 
            width: 600px; 
            margin: 0.5rem; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;  
               margin-bottom: -1rem"> 
        GeeksforGeeks</h1> 
    <h3> 
        <b> 
            Is it possible to set the equivalent of a src 
            attribute of an img tag in CSS? 
        </b> 
    </h3> 
    <img class="image" alt="gfg_img" /> 
</body> 
  
</html>