CSS Background

CSS allows the application of solid colors as background and also allows the use of background images to create quite complex effects.

CSS has far more capabilities in this aspect than HTML.

background color

can be used background-color propertySet the background color of the element. This property accepts any valid color value.

This rule sets the background of the element to gray:

p {background-color: gray;}

If you want the background color to extend a little outside the text of the element, just add some inner padding:

p {background-color: gray; padding: 20px;}

Try it yourself

Background color can be set for all elements, including body all the way to inline elements such as em and a.

background-color cannot be inherited, and its default value is transparent. Transparent means 'transparent'. That is to say, if an element does not specify a background color, then the background is transparent, so that the background of its ancestor elements can be visible.

background image

To place an image in the background, you need to use background-image attribute.The default value of the background-image attribute is none, indicating that no image is placed on the background.

To set a background image, you must set a URL value for this attribute:

body {background-image: url(/i/eg_bg_04.gif);}

Most backgrounds are applied to the body element, but it is not limited to this.

The following example applies a background to a paragraph without applying a background to other parts of the document:

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

You can even set a background image for inline elements. The following example sets a background image for a link:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Theoretically, you can even apply images to the background of replacement elements such as textareas and select, but not all user agents handle this situation well.

In addition, it should be noted that background-image cannot be inherited. In fact, all background properties cannot be inherited.

Background repetition

If you need to tile the background image on the page, you can use background-repeat attribute.

The value of the attribute repeat causes the image to tile horizontally and vertically, as is usually the case with background images. repeat-x and repeat-y cause the image to repeat only horizontally or vertically, while no-repeat does not allow the image to tile in any direction.

By default, the background image will start from the top left corner of an element. See the following example:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

Background positioning

You can use background-position attributeChange the position of the image in the background.

The following example centers a background image in the body element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

There are many methods to provide values for the background-position attribute. First, you can use some keywords: top, bottom, left, right, and center. Usually, these keywords appear in pairs, but not always. You can also use length values, such as 100px or 5cm, and finally, you can also use percentage values. Different types of values slightly affect the placement of the background image.

Keywords

Image placement keywords are the easiest to understand, as their function is as indicated by their name. For example, top right places the image at the top right corner of the element's padding area.

According to the specification, position keywords can appear in any order, as long as they do not exceed two keywords - one for the horizontal direction and the other for the vertical direction.

If only one keyword is present, the other keyword is considered to be center.

So, if you want an image to appear in the middle of each paragraph, just declare as follows:

p
  { 
    background-image: url('bgimg.gif');
    background-repeat:no-repeat;
    background-position: top;
  }

The following are equivalent position keywords:

Single keyword Equivalent keywords
center center center
top top center or center top
bottom bottom center or center bottom
right right center or center right
left left center or center left

Percentage values

The representation of percentage values is more complex. Suppose you want to center an image in its element using percentage values, it's easy:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: 50% 50%;
  }

This will result in the image being properly positioned, with its center aligned with the center of the element.In other words, the percentage values are applied to both the element and the image.That is to say, the point described as 50% 50% in the image (the center point) aligns with the point described as 50% 50% in the element (the center point).

If the image is at 0% 0%, its top left corner will be placed at the top left corner of the element's padding area. If the image position is 100% 100%, it will place the bottom right corner of the image at the bottom right corner of the right margin.

Therefore, if you want to place an image at 2/3 horizontally and 1/3 vertically, you can declare it like this:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: 66% 33%;
  }

If only a percentage value is provided, this value will be used as the horizontal value, and the vertical value will be assumed to be 50%. This is similar to the keyword.

The default value of 'background-position' is 0% 0%, which is functionally equivalent to top left. This explains why the background image is always tiled from the top left corner of the element's padding area, unless you set a different position value.

Length values

Length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.

For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.

Background Attachment

If the document is long, then when the document scrolls down, the background image will also scroll. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. Through this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that by default, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
This example shows how to set the background color of part of the text.
Set the image as background
This example demonstrates how to set the image as the background.
Set the image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
All background properties are declared in one statement.
This example demonstrates how to use shorthand properties to set all background properties in one declaration.

CSS Background Properties

Property Description
background A shorthand property that sets the background properties in one declaration.
background-attachment Whether the background image is fixed or scrolls with the rest of the page.
background-color Set the background color of the element.
background-image Set the image as the background.
background-position Set the starting position of the background image.
background-repeat Set whether and how the background image is repeated.