Working with Background

background-color

background-color property is used to set the background color of an HTML element. Its value can be any valid color name or a hexadecimal value.

Syntax for using background-color:

p
{
    background-color: red;
}

background-image

background-image is used to set an image as a background of an HTML element. Image to be set as background should be a gif, jpeg or png. By default, a smaller image will repeat itself to cover the whole background of an element.

Syntax for using background-image:

p
{
    background-image:url(flower.gif);
}

background-repeat

background-repeat property is used to decide whether to repeat a background image or not. Possible values for background-repeat are:

• repeat - allows background image to repeat in all direction
• repeat-x - allows background image to repeat horizontally
• repeat-y - allows background image to repeat vertically
• no-repeat - does not allows background image to repeat

Syntax for using background-repeat:

p
{
    background-repeat:no-repeat;
}

background-position

background-position is used to specify exactly where the background image should be placed in relation to the container. By default, setting background image using background-image property places the image at the top left corner of the container. Possible background-position properties are:

• top left(default) - sets the image at top left corner
• top center - sets the image at top center
• top right - sets the image at top right corner
• center left - sets the image at middle left corner
• center center - sets the image at middle of the container
• center right - sets the image at middle right corner
• bottom left - sets the image at the bottom left corner
• bottom center - sets the image at middle of the bottom
• bottom right - set the image at right bottom corner
• x-% y-% - set the position of x and y coordinates in percentage
• x-pos y-pos - set the position of x and y coordinates in pixels

Syntax for using background-position:

p
{
    background-position:40px left;
}

background-attachment

background-attachment property is used to specifty whether to fix the background image or not. Two value are possible for background-attachment property.

• scroll(default) - background image moves on scrolling
• fixed - background image remains stationary on scrolling

Syntax for using background-attachment:

p
{
    background-attachment:fixed;
}

background

background property is a shorthand property to set all the background properties in just one line.

Syntax for using background:

selector
{
    background:color image position repeat;
}