Backgrounds in CSS

free php tutorials, php classes, php utilities, free tools

In this tutorial, you will learn about background properties and its usage, following background properties are used in CSS

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

background-color
Using background-color property you can change background colour for an HTML element. For example:

p{
background-color:red;
}

body{
background-color:00ffcc;
}
background-image
Using background-image property you can change background image. For example:
p{
background-image:url(images/bg.gif);
}

body{
background-image:url(images/bg1.gif);
}

background-repeat
Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value of repeat, repeats the background horizontally and vertically. repeat-x only repeats the background in the horizontal direction, repeat-y vertical direction. And as you might have thought no-repeat does not repeat the background at all.

Code

Description

background-repeat: repeat

This is the default setting. Tiles the image both horizontally and vertically.

background-repeat: repeat-x

Tiles the image in the horizontal direction only. Good if you want the background running across the top of the page.

background-repeat: repeat-y

Tiles the image in the vertical direction only. Great for left-hand page borders!

background-repeat: no-repeat

No repeating takes place; only one copy of the image is displayed. This is good if you want to use a big image that isn't designed to tile.

background-attachment
There are two values for background-attachment, scroll and fixed. A valid you of scroll is what is common with browsers today. The background scrolls along as you do. A value of fixed will keep the background fixed, with the text and other goodies scrolling on top of it.

background-position
Background positioning is done by entering a value for the left position and top position separated by a space.

Bookmark This Page