Hello guys! morning and welcome to this tutorial, in my last tutorial i talked about Html blocks and the types of Html blocks available. In this tutorial am gonna be talking about Html backgrounds.
By default, the background of your webpage is white in color, i know you won't like it and that is why we are going to discuss about how to change this default background color to any other color of our choice.
HTML provides you with two good ways of decorating your webpage background.
1. HTML Background with Colors
2. HTML Background with Images
Now lets quickly take a look at both methods mentioned above with an appropriate example.
Html Background with Colors
The Html bgcolor attribute is used to control the background of the Html element, specifically the Html page body and table backgrounds. Following is the syntax to use the bgcolor attribute with any Html tag.
<tagname bgcolor="color_value" ...>
The color_value can be given in any of the following formats;
You can also read our tutorial post on: Html Basic Tags2
<! First format - use color name -->
<table bgcolor="orange" >
<!-- Second format - use hexadecimal value -->
<table bgcolor="#000000" >
<!-- Third format - use color value in RGB terms-->
<table bgcolor="rgb(0,0,120)" >
<table bgcolor="orange" >
<!-- Second format - use hexadecimal value -->
<table bgcolor="#000000" >
<!-- Third format - use color value in RGB terms-->
<table bgcolor="rgb(0,0,120)" >
Note that these are just formats to use and not an actual example. Let us take a look at the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
<!-- First format - use of color name -->
<table bgcolor="green" width="80%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
<!---- Second format - use of hexadecimal value-->
<table bgcolor="#6666FF" width="80%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!---- Third format - use of RGB values-->
<table bgcolor="rgb(255,0,255)" width="80%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
<!-- First format - use of color name -->
<table bgcolor="green" width="80%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
<!---- Second format - use of hexadecimal value-->
<table bgcolor="#6666FF" width="80%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!---- Third format - use of RGB values-->
<table bgcolor="rgb(255,0,255)" width="80%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
Now lets move to how to use images as background.
You can also read our tutorial post on: Grouping Content
Html Background with Images
The background attribute can also be used to control the background of a Html element, specifically a page body and table backgrounds. You can specify an image to set background of your Html page or table. Following is the syntax to use background attribute with any Html tag.
<tagname background="image url"....>
The most frequently used image formats are JPEG, GIF and PNG images. Let us look at the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="/images/html.gif" width="80%" height="70">
<!-- Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>
This background is filled with HTML images
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="/images/html.gif" width="80%" height="70">
<!-- Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>
This background is filled with HTML images
</td>
</tr>
</table>
</body>
</html>
You can practice using your text editor for better understanding and feel free to ask questions.
Patterned and Transparent Backgrounds
You might have seen many pattern or transparent backgrounds on various sites. It can be archieved by using patterned or transparent image in the background.
It is adviced that while creating patterns or transparent GIF or PNG images, make use of the smallest dimensions as possible even as small as 1*1 to avoid slow loading.
You can also read our tutorial post on: Html Formating
Example
<!DOCTYPE html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background using pattern -->
<table background="/images/pattern.gif" width="80%" height="70">
<!-- Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>
This background is filled with a pattern image
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background using pattern -->
<table background="/images/pattern.gif" width="80%" height="70">
<!-- Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>
This background is filled with a pattern image
</td>
</tr>
</table>
</body>
</html>
You can also try the above code out using your text editor.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the Html Fonts.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.