CSS background properties
With CSS background properties, you can define how the background of various elements is displayed.
This lesson 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, a hex value, an RGB value, or the word "transparent" for transparent color.
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: transparent;}
-->
</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:
In the above example, the background color of the webpage is specified to be aliceblue with its hex value F0F8FF. The background color of text declared with the <h1> heading tag is specified to be lightsteelblue. The background color of text declared with the <p> tag is specified to be gainsboro with its RGB value (220, 220, 220). The background color of links is specified to be transparent.
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. You can specify the background image of an element with the name 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("ob019.jpg");}
table { background-image: url("sky.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:
In the above example, the background image of the webpage is specified to be an image that has the name "ob019.jpg". The background image of tables is specified to be an image that has the name "sky.jpg".
