• We can easily add the background Image in the Html document which is to be displayed on a web page in HTML.

In this method there are two following steps:

a. Using the Background attribute:

  • Open the existing HTML file in the text editor in which we want to use the background attribute or we have to type the Html code in any text editor.
  • In HTML document move the cursor within the starting <body> tag And, then type the background attribute as shown in the following block.
  • While we have to add image just, we want to create path.
  • We have to save the HTML code or HTML file in the text editor.

For example,

<!doctype Html>
<html>
  <head>
    <title> Add the Background image using background attribute </title>
  </head>
  <body background="http://www.wikitechy.com/img/logo.png"> Wikitechy <br> Html Tutorial <br> This is wikitechy logo. <br><br></body>
</html>

Output :

 

b. Using internal style sheet

  • Open the existing HTML file in the text editor in which we want to use the background attribute or we have to type the Html code in any text editor.
  • In HTML document we have to place the cursor in the head tag and define the starting and closing tag of the <style> tag as shown in the following block.
  • In style tag, we have to type the element body and, then type the background-image
  • In text editor, we have to save the Html code and run the code.
  • we will see the image specified in the html document as a background of the web page, after execution.

For example,

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("http://www.wikitechy.com/img/logo.png");
      }
    </style>
  </head>
  <body> This is wikitechy logo! </body>
</html>

Output:

Categorized in:

Web Designing

Tagged in:

, , , , , , , ,