In HTML, it is simple to include a background image in an HTML document to show on a webpage through two distinct methods:
- Employing the Background attribute (HTML Tag)
- Utilizing 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.
To incorporate a background image into an HTML document using the Background attribute, the following steps need to be adhered to. By following these instructions, it is possible to display an image on a webpage effortlessly:
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file within the preferred text editor where the background attribute will be implemented.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using background attribute
</Title>
</Head>
<Body>
C# Tutorial <br>
Html Tutorial <br>
This page helps us to understand how to show the backround image of a web page. <br>
<br>
And, this section helps you to understand how to add the background image in an Html page using the background attribute.
</Body>
</Html>
Step 2: Next, position the cursor inside the opening <body> tag in the Html file. Subsequently, enter the background attribute as illustrated in the code snippet below:
<Body background=" ">
Step 3: Next, we need to specify the location of the image we wish to include. Enter the image path within the background attribute. If the image is located in the same folder as the HTML file, use the following path:
<Body background="filename.extension">
<Body background="image.jpg"> <br>
If the image is located in a different directory, it is necessary to specify the accurate path to the image for proper accessibility by the browser, as demonstrated in the code snippet below.
<Body background="/home/sumit/Desktop/images/image.jpg">
If the image is stored online, it can be included using a URL, as shown in the code block below.
<Body background="https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg">
Step 4: Finally, it is necessary to store the HTML file or HTML code in the text editor.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using background attribute
</Title>
</Head>
<Body background="https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg">
C# Tutorial <br>
Html Tutorial <br>
This page helps us to understand how to show the backround image of a web page. <br>
<br>
And, this section helps you to understand how to add the background image in an Html page using the background attribute.
</Body>
</Html>
The result of the code above can be observed in the screenshot displayed below:
Using Internal Style Sheet
To incorporate a background image into an HTML document through Internal CSS, it is necessary to adhere to the following procedures. By following these steps, it becomes feasible to display an image on a webpage:
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in a text editor of choice to incorporate Internal CSS for inserting a background image.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
</Head>
<Body>
C# Tutorial <br>
Html Tutorial <br>
This page helps us to understand how to show the backround image of a web page. <br>
<br>
And, this section helps you to understand how to add the background image in an Html page using the Internal CSS.
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the head tag, immediately after the closure of the title tag within the Html document. Following this, proceed to establish both the opening and closing tags of the <style> tag, as illustrated in the subsequent code block.
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
<style>
........
.........
......
</style>
</Head>
Step 3: Next, we need to enter the body element within the style tag. Subsequently, we should specify the background-image attribute as illustrated in the subsequent code block:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Background image using Internal Style sheet
</Title>
<style>
body
{
background-image:url("https://1.bp.blogspot.com/-sTxAHAxirGM/WVbAe2098nI/AAAAAAABENs/_I5sYMYgLOUzaIE7FfF4qdGX-hoAkq9SgCLcBGAs/s1600/Blog_20170624_113552.jpg");
}
</style>
</Head>
<Body>
C# Tutorial <br>
Html Tutorial <br>
This page helps us to understand how to show the backround image of a web page. <br>
<br>
And, this section helps you to understand how to add the background image in an Html page using the Internal CSS.
</Body>
</Html>
Step 4 involves saving the HTML code in the text editor and then executing the code. Upon running the code, the specified image in the HTML document will appear as the background of the webpage. The output of the HTML code can be observed in the screenshot below: