Lesson 10:HTML-Background
- Friday, February 6, 2009, 16:04
- Programming
- 6,093 views
- Add a comment
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 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:
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:
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.
(No Ratings Yet)
Loading ...About the Author
Adam has written 384 stories on this site.
Related Tutorials & Articles
HTML is capable to embed images in a webpage; it can be done by using html tag <img>. Image tag is not a container tag means there is no closing tag but it has several attributes. Tag Syntax <img src=”picpath” height=”10” width=”20” alt=”image description” align=> Src Src attribute of image tag defines source of image, src is always set...Read more
As we learn in our last lesson about background color and background image. Text color in page remain the same whatever background color or background image you have used. If you use dark background colors and images then most probably it’s difficult for page viewer to read anything. Text is useful attribute of <body> tag...Read more
The bgcolor attribute control the background color of the page. Bgcolor can be used with several html tags but here our keen focus on <body> background color. The value of background attribute can be set in plain text or in hexadecimal numbers, all background colors are the mix of RGB(red,green,blue) colors. Each colors value can...Read more
The <HR> element in html create an horizontal line or rule across the screen. <HR> is called an empty tag, although it have four attribute to change default way the rule appears on screen. This tag is called an empty tag because there is not ending tag or closing tag. Look at the simple use...Read more
In lesson 1 we have seen that head and body portion contents are shown together on body part of the document. In this tutorials we will see how to use the title tag to show the head part separate from the body part. Let me show you the document which were used in lesson 1 for...Read more
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
