Modifying the Background of a HTML Web Page
Background of an HTML Web page can be modified in many ways, for example, by adding a background color to the Web page or by adding a background image to the Web page.
Adding a Background Color to the Web Page
You can add either a predefined color value or a color name as the background color for an HTML Web page, using the bgcolor attribute of the <body> element.
Hexa Color List for each of the W3C predefined colors:
Color Name |
Values (Hexa) |
---|---|
Aqua |
#00ffff |
Black |
#00000 |
Blue |
#0000ff |
Fuchsia |
#ff00ff |
Gray |
#808080 |
Green |
#008000 |
Lime |
#00ff00 |
Maroom |
#800000 |
Navy |
#000080 |
Olive |
#808000 |
Purple |
#800080 |
Red |
#ff0000 |
Silver |
#c0c0c0 |
Teal |
#008080 |
White |
#ffffff |
Yellow |
#ffff00 |
Let’s perform the following steps to add a background color to an HTML Web page:
Open the folder containing your HTML document, as shown in below snapshot Right-click the HTML document and select the Open With->Notepad option from the context menu, as shown in below snapshot
the HTML document open in the Notepad, as shon in below snapshot:
add the code in body attribute, given below:
<!DOCTYPE html>
<html>
<head>
<title>
Title of the web page
</title>
</head>
<body bgcolor="blue">
Contents of the web page
</body>
</html>
Click File >Save, as shon in below snapshot:
Tip: you can also save the changes in the HTML document by using hte CTRL+S keyboard shortcut.
Click file>Exit, as shown in below snapshot:
open the HTMl document in the Web browser, the background color added by you appears, as shon in below snapshot:
Adding a Background Image to the Web page
similar to modifying the background of an HTML Web page by adding a backgrfound color to it, you can also modify the background of an HTML Web page by adding a background image to it.
Let's perfomr the following steps to add a background image to an HTML Web page:
Open your HTML document in Notepad, as shonw below snapshot:
Add the code, given below:
<!DOCTYPE html>
<html>
<head>
<title>
Title of the web page
</title>
</head>
<body bgcolor="blue" background="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
Contents of the web page
</body>
</html>
save and close the document.
Now, open the HTML document in the Web browser. The selected image appears in the background, as shon in below snapshot:
Now, Let's see how to specify additional information about an HTML Web page.. Click to Next Tutorial