How To Use An Image As A Background

How to add together Background Image in Html

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

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

Using the Groundwork attribute

Annotation: HTML 5 does non support the background attribute of <torso> tag, so we have to use the internal CSS choice for adding the groundwork in the Html document.

If nosotros desire to add together the background epitome in the Html certificate using the Background attribute so nosotros have to follow the steps which are given below. Using these steps, we can easily view an paradigm on a web page:

Stride 1: Firstly, we take to blazon the Html lawmaking in whatsoever text editor or open the existing Html file in the text editor in which we want to use the groundwork aspect.

Stride two: Now, move the cursor inside the starting <trunk> tag in our Html certificate. And, so type the background aspect as shown in the following block:

Step 3: Later that, we have to give the path of the image we desire to add together. And then, type the path of the image in the background aspect. If our image is stored in the same directory in which HTML file is stored so blazon the following path:

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

If our image is on the net then we can also add together the image by using URL, equally given in the post-obit cake.

Step iv: At concluding, we have to save the Html file or Html Lawmaking in the text editor.

Test it At present

The output of the higher up lawmaking is shown in the following screenshot:

Using Internal Way Sheet

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

Stride 1: Firstly, we accept to type the Html code in any text editor or open the existing Html file in the text editor in which nosotros want to employ the Internal CSS pick for adding the background image.

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

Step three: Now, we have to type the element trunk in the style tag. And, and then blazon the groundwork-epitome property equally shown in the following cake:

Step 4: And, at concluding, nosotros have to save the Html code in the text editor and run the lawmaking. Afterwards execution, we will see the paradigm specified in the html certificate as a groundwork of the web folio. The following screenshot provides the output of the above Html code: