Javatpoint Logo
Javatpoint Logo

How to add Background Image in Html

In HTML, we can easily add the background Image in the Html document which is to be displayed on a web page using the following different two methods:

  1. Using the Background attribute (Html Tag)
  2. Using an Internal Style Sheet

Using the Background attribute

Note: HTML 5 does not support the background attribute of <body> tag, so we have to use the internal CSS option for adding the background in the Html document.

If we want to add the background image in the Html document using the Background attribute then we have to follow the steps which are given below. Using these steps, we can easily view an image on a web page:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the background attribute.

Step 2: Now, move the cursor within the starting <body> tag in our Html document. And, then type the background attribute as shown in the following block:

Step 3: After that, we have to give the path of the image we want to add. So, type the path of the image in the background attribute. If our image is stored in the same directory in which HTML file is stored so type the following path:


If our image is stored in any other directory then type the correct path of that image, so that the browser can read the image easily as described in the following block.

If our image is on the internet then we can also add the image by using URL, as given in the following block.

Step 4: At last, we have to save the Html file or Html Code in the text editor.

Test it Now

The output of the above code is shown in the following screenshot:

How to add Background Image in Html

Using Internal Style Sheet

If we want to add the background image in the Html document using the Internal CSS then we have to follow the steps which are given below. Using these steps, we can easily view an image on a web page:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS option for adding the background image.

Step 2: Now, we have to place the cursor in the head tag, just after the closing of title tag in the Html document and then define the starting and closing tag of the <style> tag as shown in the following block.

Step 3: Now, we have to type the element body in the style tag. And, then type the background-image property as shown in the following block:

Step 4: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the image specified in the html document as a background of the web page. The following screenshot provides the output of the above Html code:

How to add Background Image in Html




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA