Home Advertise with us Forum Articles Sitemap Contact

CSS Background

Background is a vital element of your website. The background should be such that it blends well with the text & other ingredients of your site. Whether it is the background image, color or position that you wish to set, each needs to be carefully chosen.

Depending upon whether you have a professional website or casual, the background may either be a total contrast of the text or may be complimentary to it. All these modifications can be done using CSS background properties, which are used for defining background effects of an HTML element. With the help of CSS, you can choose the color & image of your choice & have it repeat horizontally or vertically or just keep it at a fixed position.
The Background Color
This property specifies the background color of an HTML element. The background colors can be specified by either the generic name, hexadecimal notation or the RGB (255, 0, 0) system.

Example: body { background-color:#6495ed; }

The Background Image
This property is used to define the image to be used as the background for an element. The background image is repeated by default so that it covers the entire length of the element.

Example: body {background-image:url('flower.gif');}

Background Image Horizontal or Vertical Repeat

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

For repeating horizontally “repeat x” is used & for repeating vertically “repeat y” is used. To keep the image at a fixed position without repeating it, “no-repeat” is used.

Background Position
The position of the background image can be specified using the background position property.


{ background-image:url ('img_tree.png'); background-repeat:no-repeat; background-position:top left; }

Since there are several properties to consider while defining the background, we can write it as:

body {background: #6495ed url('flower.gif') no-repeat top left;}