Background

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%, x-pos, y-pos
background-attachment fixed, scroll



Background Colour

A background colour can be selected for a html element. Let us change the background colour of the above table to a pale blue.


<head>
<style>
table
{
background-color:#ebfdff;
}
</style>
</head>

Displays

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%,x-pos, y-pos
background-attachment fixed, scroll



Background Image

If you place a background image on an element make sure the image does not over power the content. Let us place a star as a background image to the above table.



<head>
<style>
table
{
background-image:url(image/star5.jpg);
}
</style>
</head>

Displays

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%,x-pos, y-pos
background-attachment fixed, scroll



Background Repeat

A background-image can be repeated horizontally or vertically.


Repeat Horizontally

<head>
<style>
background
{
background-image:url(image/star10.jpg);
background-repeat:repeat-y
}
</style>
</head>

Displays

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%,x-pos, y-pos
background-attachment fixed, scroll



Repeat Vertically

<head>
<style>
background
{
background-image:url(image/star10.jpg);
background-repeat:repeat-x
}
</style>
</head>

Displays

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%,x-pos, y-pos
background-attachment fixed, scroll



Background Position

<head>
<style>
background
{
background-image:url(image/star10.jpg);
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>

Displays

Property Values
background-color colour name e.g.red, hex e.g.#02222,
rgb(e.g.221,221,222), transparent
background-image url, none
background-repeat repeat,repeat-x,repeat-y
background-position top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right, x-%, y-%,x-pos, y-pos
background-attachment fixed, scroll



Background Attachment

An image in the background can be fixed so when you scroll down it will stay in its original position or you can have an image that will scroll down. We can use the following css codes for a fixed and scroll image but it does not work on all browsers.



Fixed Image

<head>
<style>
background
{
background-image:url(image name);
background-attachment:fixed;
background-repeat:no-repeat }
</style>
</head>

Scroll Image

<head>
<style>
background
{
background-image:url(image name);
background-attachment:scroll;
background-repeat:no-repeat }
</style>
</head>




Now do the Exercise!