Sponsored Ads
By default, your webpage background is white in color. You can change it to any colour you like or you can even add a picture as a background.
Sponsored Ads
Html Background with Colors
The attribute used to set background colour is bgcolor. If you want to add colour to the entire webpage then you should add it to the body tag.
You can also bgcolor attribute to any element if you wish.
Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.
The syntax
<tagname bgcolor = "color_value"...>
Example
<body bgcolor = “FF0000”>
This color_value can be given in any of the following formats
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >
Example
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
Output
| This background is yellow |
| This background is sky blue |
| This background is green |
Html Background with Images
You can also specify an image as the background of your HTML page or table.
Syntax
<tagname background = "Image URL"...>
Example
<body>
<!-- Set table background -->
<table background = "https://img.tutorialmanthra.com/flower-image.jpg" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
Output
Sponsored Ads
| This background is filled up with HTML image. |
Patterned & Transparent Backgrounds
You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using patterned image or transparent image in the background.
It is recommended to use the smallest image for patterned backgrounds.
Example
<!-- Set a table background using pattern -->
<table background = "https://img.tutorialmanthra.com/flowerbg.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
Output
| This background is filled up with a pattern image. |
HTML Background Image using CSS
Html allows images to be set as a background. In order to do this we must use the CSS property background-image. This is actually done in CSS and we can learn this in detail while learning CSS.
You can either specify this in separate style element or as inline in any Html tag.
<div style="background-image: url(flower-image.jpg');">
or
<style>
div {
background-image: url(flower-image.jpg');
}
</style>
If you want to add the background image to the entire page use the background-image property to the body element.
<style>
body {
background-image: url(flower-image.jpg');
}
</style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it has reach the end of the element.
To avoid the background image from repeating itself, set the background-repeat property to no-repeat;
Background Cover
If you want the background image cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
<style>
body {
background-image: url(flower-image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
If the image is smaller than the element and you want to stretch to fit the entire image in the element, you can set the background-size property to 100% 100%:
<style>
body {
background-image: url(flower-image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Sponsored Ads
You can learn more about CSS background properties, in CSS Background Tutorials.
Sponsored Ads