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

Last Updated : 15 Mar, 2023

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:

background-image: url("url");

Property value: It holds the URL of an image that you want to use as the background image.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to set background-image for
        the body element using CSS ?
    </title>

    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/CSS.png");
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: white;">
        GeeksforGeeks
    </h1>

    <h3>
        Set background-image for
        the body element
    </h3>
</body>

</html>

Output:

Example 2: So in this example, we will see how to set the background image using CSS styling. using the absolute URL. as you can see in the code.

Syntax :

body {
      background-image: url('http image link ');
      background-size: cover;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20230315170105/gfg1.png);
            background-color: black;
            border-image-width: 400px;
            background-size: cover;
        }

        h1,
        h3 {
            text-align: center;
            margin: 40px auto;
            color: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <h1> GeeksforGeeks !</h1>
    <h3> Background image for the body element </h3>
</body>
</html>

Description: In the above code we use the HTML tag such as the heading inside the body tag. and create the two headings. and add the CSS where we used the background-image property to set the URL of the background image. And the background-size property sets the size of the background image to cover the entire background area of the body element.

Overall, this code demonstrates how to set a background image for the body element using CSS.