CSS Background

CSS background property is used to define the background properties of an element. The background properties used in CSS are:

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

Background

There are many properties when dealing with CSS backgrounds. So to shorten the code, it is best to specify all the properties in a single property. This is called the shorthand property of background. There is no problem if one of the content is missing as long as the ones that are present are in correct order.

For example:

body { 
background:#ffffff url('logo.png') no-repeat fixed top; 
}

Background Color

The background-color property is used to specify the background color of an element. The background color of a page should be declared in the body itself.
In CSS, color options can be given by three different ways:

• HEX value - #000000
• RGB value - rgb(0,0,0)
• Color name - Black

For example:

body { background-color:#e0ffff; }

Background Image

The background-image property is used to specify a background picture in an HTML page. By default, the background image will be repeated to cover all area.

For example:

body { background-image:url("image.png") }

Background Repeat

By default, the background image will be repeated both horizontally and vertically so that it will cover all the region. But using the background-repeat property, we can adjust the repeating option of the image file.
We can adjust the image in the following four ways

• repeat - Default option, the image will be repeated both horizontally and vertically
• repeat-x - The image will be repeated horizontally only.
• repeat-y - The image will be repeated vertically only
• no-repeat - The image will not be repeated.

For example:

body { background-image:url("image.png"); 
       background-repeat:repeat-x; 
     }

Background Position

The background-position property is used to adjust the position of the image file to a specific position so that it does not disturb the elements.

For example:

body { background-image:url("image.png"); 
       background-repeat:repeat-x; 
       background-position:center; 
     }

Background Attachment

The background-attachment property is used to set whether the image is fixed or it scrolls with the element.
We can attach the elements in the following ways

• scroll - The background scrolls along with the element.
• fixed - The background is fixed.
• local - The background scrolls along with the element's contents.

For example:

body { background-image:url("image.png"); 
       background-repeat:repeat-x; 
       background-position:center; 
       background-attachment:fixed;
     }