HTML – BACKGROUNDS
By default, your webpage background is white in color. You may not like it, but no worries.
HTML provides you following two good ways to decorate your webpage background.
- Html Background with Colors
- Html Background with Images
Now let's see both the approaches one by one using appropriate examples.
Html Background with Colors
The bgcolor attribute is used to control the background of an HTML element, specificallypage body and table backgrounds. Following is the syntax to use bgcolor attribute with
any HTML tag.
<tagname bgcolor="color_value"... >
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)" >
ExampleHere are the examples to set background of an HTML tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title> </head>
<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> </html>
This will produce the following result:
Html Background with Images
The background attribute can also be used to control the background of an HTML element, specifically 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"...>Example
Here are the examples to set background images of a table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="/images/html.gif" width="100%" height="100">
<tr><td>This background is filled up with HTML image.</td></tr>
</table>
</body>
</html>
This will produce the following result:
This background is filled up with HTML image
Patterned & Transparent BackgroundsYou 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 suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1x1 to avoid slow loading.
ExampleHere are the examples to set background pattern of a table:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title> </head>
<body>
<!-- Set a table background using pattern -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>This background is filled up with a pattern image. </td></tr>
</table>
<!-- Another example on table background using pattern -->
<table background="/images/pattern2.gif" width="100%" height="100"> <tr><td>
This background is filled up with a pattern image.</td>
</tr></table></body> </html>
This will produce the following result:
HTML Backgrounds FAQ
Q 1. What is a background in HTML?
Answer: A background in HTML refers to the area behind the content of an element. It can include colors, images, gradients, and patterns that enhance the visual appearance of a webpage.
Q 2. How do I set a background color in HTML?
Answer: You can set a background color using CSS. For example:
<body style="background-color: lightblue;">
body {
background-color: lightblue;
}
Q 3. How do I set a background image in HTML?
Answer: You can set a background image using CSS as well:
<body style="background-image: url('image.jpg');">
Or in a separate CSS file:
body {
background-image: url('image.jpg');
}
Q 4. Can I use multiple background images?
Answer: Yes, you can use multiple background images in CSS. For example:
body {
background-image: url('image1.jpg'), url('image2.jpg');
}
Q 5. How do I control the background image size?
Answer: You can control the size of the background image using the background-size property:
body {
background-image: url('image.jpg');
background-size: cover; /* or contain, or specific dimensions */
}
Q 6. What is the difference between background-repeat: no-repeat; and background-size: cover;?
Answer:
- background-repeat: no-repeat; prevents the background image from repeating.
- background-size: cover; scales the image to cover the entire element, potentially cropping it
Q 7. How do I position a background image?
Answer: You can position a background image using the background-position property:
body {
background-image: url('image.jpg');
background-position: center; /* or top left, bottom right, etc. */
}
Q 8. Can I use gradients as backgrounds?
Answer: Yes! You can use CSS gradients as backgrounds. For example:
body {
background: linear-gradient(to right, red, yellow);
}
Q 9. How do I make a background image responsive?
Answer: To make a background image responsive, you can use:
body {
background-image: url('image.jpg');
background-size: cover; /* or contain */
background-position: center;
}
Q 10. What is the background-attachment property?
Answer: The background-attachment property controls whether the background image scrolls with the content or is fixed in place.For example:
body {
background-image: url('image.jpg');
background-attachment: fixed; /* or scroll */
}