How to Add Background Image in CSS
- Add Background Image in CSS when the Image and the CSS File are at the Same Folder
- Add Background in CSS Image when the Image, the HTML and CSS Files are at the Different Folder
This tutorial introduces how to add background images in CSS. It will also explain what are the common mistakes while adding background images.
Add Background Image in CSS when the Image and the CSS File are at the Same Folder
We can background images in CSS using the background-image property. Then for the value, we can use the url() function where the image name or the image path is the parameter. The property has to be written after selecting the body tag in the CSS. This will enable the background image in the whole body of the webpage. We should write the image name and path according to the folder structure of the HTML, CSS and image file. We will explain some scenarios of different image locations with respect to the HTML and CSS files.
If the image and the CSS file is located in the same directory, we can simply write the image name in the url() function. For example, we have the image bird.jpg in a directory. We have a CSS file style.css in the same directory; the following code will set the background image.
Example Code:
body{
background-image:url(bird.jpg);
}
Additionally, we have to make sure that the relative file path of the HTML and CSS files should be correct. If CSS is written internally in HTML, the image and HTML files should be inside the same directory. If they are not in the same directory, the relative path of the CSS file should be correct in the HTML file.
Add Background in CSS Image when the Image, the HTML and CSS Files are at the Different Folder
Let’s assume that we have an HTML folder named index.html, a CSS file named style.css, and the image named bird.jpg. The HTML file lies in an html folder, the CSS file lies in the css folder, and the image lies in the image folder. In such a file structure, we should be aware of how we should give the relative path of the CSS file and image so that the background image will be displayed. Firstly, we should make sure that the HTML and CSS files are linked. The following code links the HTML and CSS file with the above-stated folder structure.
Example Code:
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
The ../ symbol denotes one step back from the current folder. When we go one step back from the html folder where the index.html lies, we will reach the parent folder where the css folder lies. Then, we can find the style.css file inside the css folder. Now, we have to provide the relative path of bird.jpg in the same way in the CSS file.
As the image folder lies one step back from the current CSS file, ../ will take us back to the parent folder. Then, it fetches the image folder where the bird.jpg lies. Thus, we can set the background image in CSS without a flaw.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn