html

Background Image in CSS

Creating a decent and eye-catching website is not an easy task. You can face multiple hurdles regarding its style. To tackle such design hurdles, CSS provides multiple styling properties. The background property is one of them which determines the background of any website. Most specifically the background-image property has a great impact on the front view of any website.

In CSS, the background-image property is used to set the background image for single or multiple elements. In CSS, multiple properties can be used to set the background image. Some commonly used properties are stated below:

  • background-size property is used to adjust the size of the background image.
  • background-repeat property enables or disables the repetition of an image.
  • Background-position specifies the position of an image.

This write-up will present a comprehensive overview of background-image property, where you will learn how to add a background image to a single element or entire body.

How to Add a Single Background Image in CSS

The background-image property is mostly used with the body element however it can be added to any specific element such as paragraphs, headings, div etc. to add the background image.

Example 1: The below-given piece of code will embed a background image on the whole body:

<html>
     <head>
     <title>Background Image CSS</title>
     <style>
          body{
               background-image:url("linuxhint.jpeg");
          }
     </style>
     </head>
     <body>
          <h1>Background image</h1>
          <p>Welcome to linuxhint.com</p>
     </body>
</html>

It will show the following output:

In the above-given example image was placed in the same folder with HTML file so, in the URL it takes only the image name with its extension as shown in the following snippet:

Now let’s move the image to some other folder let say “images”:

If the image is not there in the same directory than we have to specify the complete path of the image otherwise we wouldn’t get the desired results.

Example 2: Instead of providing the complete path this example will try to access the image with its name only:

<html>
     <head>
     <title>Background Image CSS</title>
     <style>
          body{
               background-image:url("linuxhint.jpeg");
          }
     </style>
     </head>
     <body>
          <h1>Background image</h1>
          <p>Welcome to linuxhint.com</p>
     </body>
</html>

The image is placed in the images. From the output it would be clear that if you didn’t specify the exact path you wouldn’t get the desired results as shown below:

Example 2: let’s consider an example where the image is present in the images folder while the HTML file is there in the Background-image folder. In such a case, we specify the complete path of the image as shown in the following snippet:

<html>
     <head>
     <title>Background Image CSS</title>
     <style>
          body{
               background-image:url("../images/linuxhint.jpeg");
          }
     </style>
     </head>
     <body>
          <h1>Background image</h1>
          <p>Welcome to linuxhint.com</p>
     </body>
</html>

In the url first comes two dots “..” that states move back one directory then go to the “images” directory where image is placed and at the end image name will come with its extension like jgeg, png, etc. Now this program will generate the proper output with background image as shown below:

Similarly, the Background Image can be embedded with any Element like <p>, <h1>, etc.

How to Add Multiple Background Images in CSS

In CSS, multiple background images can be added to the same element by providing multiple URLs.

Example
The below-given code will add multiple images on the body element, moreover it will utilize a few more properties like background-repeat, background-size, etc. as shown below:

<html>
     <head>
     <title>Background Image CSS</title>
     <style>
          body{
               color: gold;
               background-image:url("linuxhint.jpeg"), url("blue.jpg");
               background-size: 600px;
               background-position: center;
               background-repeat: no-repeat, no-repeat;
          }
     </style>
     </head>
     <body>
          <h1>Background image</h1>
          <p>Welcome to linuxhint.com</p>
     </body>
</html>

The above code utilizes

  • color property to set the gold color for the text,
  • background-image added two images,
  • background-size set the image’s size to 600px,
  • background-position to align the image’s position to center,
  • and finally the background-repeat takes “no-repeat” which means each image will be displayed only once.

As a result it will generate following output:

From the output, you can clearly see that the blue.jpg image is behind the linuxhint.jpeg image which means the URL you write first will appear on the top while the second image will be displayed on the back/behind.

Conclusion

background-image property sets the background image for single or multiple elements. In order to implement a background image simply specify the URL of the image in the background-image property.

This article presented a detailed overview of background-image property. Initially, it explains how to add a single background image in CSS. Afterward, this write up guided how to set more than one background images for an element.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.