CSS background properties
With CSS background properties, you can define how the background of various elements is displayed.
This tutorial focuses on:
- Setting a background color
- Setting a background image
Setting a background color
You can use CSS to set the background color of various elements including the webpage itself, tables, textboxes and links.
The background color of an element is set with the background-color property. You can specify the background color of an element with a color name, an RGB value, or a hexadecimal value.
Example:
<html>
<head>
<title>Background properties</title>
<style type="text/css">
body {background-color: #f0f8ff;}
h1 {background-color: lightsteelblue;}
p {background-color: rgb(220, 220, 220);}
a {background-color: #e6dcbe;}
</style>
</head>
<body>
<h1>Some text</h1>
<p>
A paragraph
</p>
<a href="http://www.landofcode.com">
Landofcode.com main page
</a>
</body>
</html>
Output:
Setting a background image
You can use CSS to set a background image for various elements including the webpage itself and tables.
The background image of an element is set with the background-image property. The value this property takes should be the location of the image specified within a url() identifier.
Example:
<html>
<head>
<title>Setting a background image</title>
<style type="text/css">
body {background-image: url(/images/ob020.jpg);}
table {background-image: url(/images/apple.jpg);}
</style>
</head>
<body>
<table border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output: