Lesson 10:HTML-Background

The background attribute allows you to place image or picture on background of your page. The background is most commonly used attribute of <body>,<table> element. When background tag within body tag it repeat the image to fill whole web page background.It’s a good practice to use small size images because huge size image take time to load.

Try to use dim,light color background to make it easy for page viewer to easily read the words. There are different image format available such as jpg,jpeg,bmp and png etc. Always look at the size first using bmp format image can over burden your web page and it will take time when anyone accessing the page from web server. Background attribute take the value of image path or url form where it will pick the image, make sure that images and web page resides on same machine.

Let’s make a simple html document to see the usage of background tag.

HTML code:

<html>
<head>
<title>
Background
</title>
</head>
<body background=”a.jpg”>
<h1>Check the Background image</h1>
</body>
</html>

Output:

image

Image and html document resides on same folder that’s why only image name is set equal to background attribute. As you can see the same image is repeated to fill complete web page background.

Now the image is moved to other location let say C drive, to get the image from different directories complete background path is defined.

HTML code:

<html>
<head>
<title>
Background
</title>
</head>
<body background=”C:\a.jpg”>
<h1>Check the Background image</h1>
</body>
</html>

Output of HTML code:

image

You can also define URL for background image, when the page is loaded it will grab the image from given URL.

HTML code:

<html>
<head>
<title>
Background
</title>
</head>
<body background=
http://www.chrisboltermagic.com/images/myspace.jpg>
<h1>Check the Background image</h1>
</body>
</html>

 

Output of HTML code:

image

Now, I am confident that you can use the background attribute with perfection. To learn more keep reading our tutorial and provide us your comments.

 

Be Sociable, Share!

Leave a Reply