How to Set Background Image in CSS

1. Use the background:url() to Set the Background Image in CSS
2. Use the Relative Path /image/picture to Set the Background Image in CSS
3. Use the Relative Path ../image/picture to Set the Background in CSS

This article introduces methods to set background images in CSS. We will discuss how to set the path of the image so that the background image correctly shows up. Furthermore, we will discuss the different relative paths.

Use the background:url() to Set the Background Image in CSS

We can use the background property to set the background image in CSS. The URL() function will hold the image’s file path as the background image. The background property is the shorthand of several other properties associated with the background. Those properties in order are background-color, background-image, background-repeat, background-attachement and background-position. Using the background property, we can assign the values for all these properties in a short way.

The criticl point where we can get wrong is while writing the path of the image in the URL() function. We should be aware of the location of the image, and the path that is written in the URL() function should be relative to the CSS file. If we write the CSS in the HTML file itself, the path should be relative to the HTML file.

In the example below, the image named picture is inside the image folder. The image folder and the following CSS file style.css is in the same folder. Therefore, the following code will set the background image.

The folder structure is shown below:

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

Example Code:

body {
    background: url(image/picture);
}

Use the Relative Path /image/picture to Set the Background Image in CSS

We can use the /image/picture file path format to set the background image in CSS. In such a format, the image is located inside the image folder. The image folder is located at the root of the current web.

In the example below, we have set the picture image as the background image. The location of the CSS file does not matter in this format. We do not need to write the file path relative to the CSS file. The file path is written relative to the root of the current web. It means that the image folder lies in the root directory.

Example Code:

body {
    background: url(/image/picture);
}

Use the Relative Path ../image/picture to Set the Background in CSS

We can move back to one level in a directory structure using the ../ notation. The ../ notation can be used to write the relative file path in the URL() function while setting the background in CSS.

For example, we have an HTML file test.html in the html folder. The html folder lies inside the web folder. The image picture lies inside the image folder inside the web folder. In such a directory structure, we can use the following code to set the background.

The folder structure is shown below:

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

In the example below, we have written the CSS in the HTML file itself. The ../ notation takes us back to the web folder from the html folder. Then it finds the image folder and then the picture file inside the image folder. In this way, we can set the background image in CSS using the relative path.

Example Code:

body {
    background: url(../image/picture);
}