CSS element() Function

Last Updated : 08 Jun, 2023

The element() function of CSS is used to place the image in one tag from another element present on the page. The image shows changes as the changes are made in another HTML element.

Syntax:

element(id)

Parameters: This function takes the id of the HTML element.

Note: This function does not work with class tag and please run the code in Firefox.

Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0">
    <title>CSS element() Function</title>
</head>
<style>
    * {
        color: #fff;
        font-size: 20px;
    }
 
    .container {
        padding: 10px;
        width: fit-content;
        height: auto;
        background: -moz-element(#bg1);
    }
 
    #bg1 {
        text-align: center;
        width: fit-content;
        height: 300px;
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG");
    }
</style>
 
<body>
    <div class="container">
        Text from container
    </div>
 
    <div style="overflow:hidden; height:0;
            width:fit-content;">
        <div id="bg1">Text from bg1</div>
    </div>
</body>
</html>