Slide 5.1: CSS background

Slide 4.7: CSS how to ... (cont.)
Slide 5.2: CSS background (cont.)
Home

CSS Background

CSS background properties are used to define the background effects of an element. CSS properties used for background effects include:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color
The background-color property specifies the background color of an element. The background color of a page is defined in the body selector, e.g.,

   body { background-color:#b0c4de; }

The background color can be specified by:

name—a color name, like "red",
RGB—an RGB value, like "rgb(255,0,0)", and
Hex—a hex value, like "#ff0000".

For example, the h1 and div elements have different background colors:

   h1  { background-color:#6495ed; }
   div { background-color:#b0c4de; }

Background Image
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this:

   body { background-image:url('bg.png'); }

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> body { background-color:#b0c4de; } </style> </head> <body> <center> <img src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/dog.gif" /> </center> </body> </html>

Slide 4.7: CSS how to ... (cont.)
Slide 5.2: CSS background (cont.)
Home