How To Make A Picture The Background In Html

How to add Background Image in Html

In HTML, we tin easily add the groundwork Image in the Html document which is to be displayed on a spider web page using the following unlike two methods:

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

Using the Groundwork attribute

Notation: HTML 5 does not support the groundwork attribute of <body> tag, and then we have to use the internal CSS option for adding the groundwork in the Html document.

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

Step ane: Firstly, nosotros take 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 groundwork attribute.

Step 2: At present, move the cursor within the starting <body> tag in our Html certificate. And, so type the background attribute equally shown in the post-obit cake:

Step 3: After that, nosotros take to give the path of the image we want to add together. So, type the path of the image in the groundwork attribute. If our epitome is stored in the aforementioned directory in which HTML file is stored then type the following path:

If our image is stored in any other directory so blazon the correct path of that image, then that the browser tin can read the image hands equally described in the following cake.

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

Pace 4: At last, nosotros have to salvage the Html file or Html Code in the text editor.

Examination it Now

The output of the to a higher place code is shown in the post-obit screenshot:

Using Internal Style Canvas

If we want to add together 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 epitome on a web page:

Step ane: Firstly, we accept to type the Html lawmaking in any text editor or open the existing Html file in the text editor in which we desire to utilise the Internal CSS choice for adding the background image.

Step ii: At present, we have to place the cursor in the head tag, just after the closing of title tag in the Html document and so ascertain the starting and closing tag of the <fashion> tag every bit shown in the following block.

Step three: Now, we accept to type the chemical element body in the way tag. And, then type the background-paradigm property as shown in the following block:

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