How To Set An Image As A Background

How to add Background Paradigm in Html

In HTML, we tin easily add the background Image in the Html certificate which is to be displayed on a web folio using the post-obit dissimilar two methods:

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

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 groundwork image in the Html document using the Background aspect then we take to follow the steps which are given below. Using these steps, we can easily view an image on a web page:

Stride 1: Firstly, we have to type the Html code in any text editor or open up the existing Html file in the text editor in which we desire to use the background aspect.

Step two: Now, motility the cursor inside the starting <trunk> tag in our Html certificate. And, then type the groundwork aspect as shown in the following block:

Step 3: Afterwards that, we have to give the path of the epitome we want to add. So, type the path of the paradigm in the groundwork attribute. If our image is stored in the same directory in which HTML file is stored so type the post-obit path:

If our image is stored in any other directory then type the right path of that image, then that the browser can read the paradigm hands equally described in the following block.

If our image is on the net then nosotros can also add the image past using URL, as given in the following block.

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

Test it At present

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

Using Internal Fashion Canvass

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

Step one: Firstly, we take to type the Html code in whatever text editor or open the existing Html file in the text editor in which nosotros desire to use the Internal CSS option for calculation the background image.

Footstep 2: At present, we have to place the cursor in the head tag, only after the closing of title tag in the Html certificate and so define the starting and closing tag of the <style> tag equally shown in the following block.

Stride three: Now, we take to type the element body in the style tag. And, then blazon the background-image property as shown in the following block:

Step four: And, at last, we have to save the Html lawmaking in the text editor and run the code. Afterward execution, we will come across the epitome specified in the html document as a background of the web page. The following screenshot provides the output of the above Html code: