You are on | Tutorials / HTML / Set document background color and image
Chapter 1: HTML & web pages


Internet and world wide web
Tags in HTML
URLs in HTML
Planning and designing a website
Structure of the HTML document
Setting Document background

Chapter 2: Working with Text
Chapter 3: Working with images
Chapter 4: Audio and videos
Chapter 5: Hyperlinks
Chapter 6: Tables
Chapter 7: Forms
Chapter 8: Frames
Chapter 9: CSS
Chapter 10: HTML entities
Chapter 11: HTML colors

 

Set document background color and image


The background and background image of an HTML document are specified using two different attributes of the <body> tag.

  1. Background color simply fills the entire document.
  2. Background images are tiled by the browser. It means that they are repeated left to right, top to bottom filling up the visible space of the browser.

To define a background color for a document, add the bgcolor attribute to the < body > tag as show below.

<body bgcolor> 

Set the bgcolor attribute equal to a hexadecimal color value or predefined color name. In the following example, the background of the document has been specified as black using hexadecimal notation.

<body bgcolor="#000000" text="white">
<h1> WebJoogler.com </h1>

Here in the above code, <h1> tag means heading number 1. Heading 1 has the biggest font size. You may set this tag as heading 2, heading 3 and so on. Just replace the number value with the heading level, for example <h2> => Heading 2.

Now the HTML code for a complete page will look like this:

Open the file in your browser, the output should look like this:

 

Now let's see, how to add an image to your HTML document.

It is as simple as one two three. HTML has predefined attributes by using which you can enhance the look of your page.

To add a background image, simple add an attribute namely background and in double quotes, type the location of your desired image.

For instance

<html>

<head>

<title>Welcome to HTML tutorials, presented by www.webJoogler.com</title>

</head>

<body background="images/logo.gif" text="red">

<h1> WebJoogler.com </h1>

</body>

</html>

The out put of the document should be