Slide 8.7: CSS background

Slide 8.6: CSS how to ... (cont.)
Slide 8.8: CSS background (cont.)
Home Print version

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/101/8/figure/dog.gif" /> </center> </body> </html>

Review: CSS Background

background-attachment

background-color

background-image

background-size

Result:

◀
Previous

Slide 8.6: CSS how to ... (cont.)
Slide 8.8: CSS background (cont.)
Home Print version

▶
Next

Exercising would be much more rewarding
if calories screamed while you burned them.