CSS Backgrounds

(average: 4.33 out of 5)

 Loading ...

One of the smartest technique of adding background colors and images to webpage layouts is by using CSS. With css we can have better control over the layouts. For example, you can apply different background colors for different areas of a layout.

CSS Backgrounds

How to apply a background color using CSS:

A background color can fill the area behind the elements with the specified color. A background color can be defined by the css property

background-color: xxxxxx;

The values of the ‘x’ replaces the HTML color codes . For example, background-color: 0000FF; can show a background color of blue.

Padding and Margin:

If you apply a padding to the layout, the background color will extend in to the padding. But it will not extend, if you apply a margin for the same layout.

How to apply a background image:

You can show any images as a background and you can also position it wherever you like.

The background image can be defined using the following css property

background: url(path to the image) no-repeat;

In the above the line, the “no-repeat” tells the browser not to repeat the image more than once. This confirms avoiding tiling of the background. But in some situations where image tiling is necessary and so we can use the CSS repeat properties.

background: url(path to the image) repeat-x;
To repeat the image horizontally and

Tiling Horizontally

background: url(path to the image) repeat-y;
To repeat the image vertically.

Tiling Vertically