CSS online training course

CSS lesson 7, Background training

Background

Background is all about the posibillities to step up the background of a page.
This can be with or without a image etc.
The background color of a element can also be transparent.
P {background:tranparent;}

We can also use the forms which are written below. This way we can give specific values to the background.
These are :
background-color
background-image
background-repeat
background-attachment
background-position
inherit

How to use repeat

The background image is being repeated in horizontal and vertical direction so the entire background will be covered with the image.

As you can see the background consists of two items : the color #e4e4e4 and an image. If the image doens't "work" the color will appear in its place.

Repeat x

Repeat-x makes the image only be repeated horizontally. The result will be a bunch of images next to each other.

The background-repeat tells in which direction the background image will be repeated or if it will be repeated at all.

Below the horzontal function is activated with a blue square and we added a DIV square with a green color. This last css function fills the defined square entirely.

Repeat y

Repeat y makes the images be repeat only vertically.

Repeat no

If you dont want any repeats of an image ( so use it only once on a page ) then we use the command ''repeat-no''.