Which property is used to set the background image of an element using CSS ?

Which property is used to set the background image of an element using CSS ?

Last Updated : 25 Jun, 2022

In this article, we will see the property used for setting the background image of an element in CSS. The background image can be set using the background-image property that is used to set one or more background images for an element. By default, it places the image in the top left corner. To specify two or more images, we need to specify the separate URLs with a comma for both images.

Syntax:

element_selector {
    background-image: url('url')|none|initial|inherit;
}

Example1: This example illustrates the background-image property by setting the URL value.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        background-image property
    </title>
    <style>
        body {
            background-image: url(
    "https://media.geeksforgeeks.org/wp-content/uploads/20220617064350/color.jpg");
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Setting the Background-image for an element</h3> 
</body>
</html>

Output:

Example 2: This example illustrates the background-image property by setting the URL value with the initial that sets the property to its default value.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS background-image property
    </title>
    <style>
        body {
            background-image: url(
    "https://media.geeksforgeeks.org/wp-content/uploads/rk.png") initial;
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>
            Setting the Background-image for an element
        </h3>
        <h3>
            CSS background-image:"url" initial;
        </h3> 
    </center>
</body>
</html>

Output:

Which property is used to set the background image of an element using CSS ?

A

abhishekpal97854368

Improve

Article Tags :

Similar Reads

Which property is used to control the scrolling of an image in the background ?

In this article, we will discuss the property that is used to control the scrolling of an image in the background. The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. It can be set to scroll or make it remain fixe

Which property is used to set the height of a box in CSS ?

In this article, we will learn about the property that is responsible to set the height of a box. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you

How to set background-image for the body element using CSS ?

In this article, we set the image into the background using CSS property. The background-image property is used to set one or more background images to an element. By default, it places the image in the top left corner. To specify two or more images, separate the URLs with a comma. Syntax: backgroun

Set the size of background image using CSS ?

Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the

How to stretch and scale background image using CSS?

The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi