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

CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of a website. The background-image property is one of the many features in CSS, which is used to set the background image using the background-image property.

In web development, the background image is an important part of the overall design of a website. The default background of the body element in HTML is white, but with a few lines of CSS code, the background of a webpage can be changed to any image.

Setting background-image in CSS

Setting a background image is a great way to enhance the visual appeal of a website, and it can be easily done using CSS with the body element. It creates a unique and fabulous look and gives the website a professional touch. Here, we will learn how to set a background image for the body element using CSS.

Basic Syntax

The background image for the body element is set using CSS with the help of the below syntax −

body {
   background-image: url('path to the image.jpg');

The above syntax sets the background image of the body element to the image located at "path/to/image.jpg". The url() function is used to specify the path of the image.

Set background-image Using the Body Element

Now, we will learn the easy steps that can follow to set a background-image for the body element and make the website stand out.

Step 1: Choose an Image

Before starting to add the background image to the website using a body element, we need to select an image. The image can be a photograph, a graphic, or a pattern.

Step 2: Add the Image to HTML

In this step the image is added to the HTML code. For doing this, use the following code.

<body style="background-image: url(;">


   body {background-image: url("");}

Step 3: Style the Background Image with CSS

After adding the image to HTML code, we style the image using CSS. The position and size of the image is adjusted using the following code.

body {
   background-size: cover;
   background-repeat: no-repeat;

We have used background-size property to scale the image which covers the entire background, while 'no-repeat' ensures that the image is not repeated.

Step 4: Combining the HTML and CSS Code


Here, we will combine the HTML and CSS to set background-image

<!DOCTYPE html>
      body {
         background-image: url('');
         background-repeat: no-repeat;
         background-size: cover;
         text-align: center;
         color: red;
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Set Background image for the body element</h3>

For further customizing the background image, additional CSS properties such as opacity, background-position and background-attachment etc. can be used.


Setting the background image for the body element of the website is a simple but effective way. By following the above steps, you can easily add an image to the website and style it to suit needs.

Updated on: 12-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started