CSS: Background Properties

CSS provides a wide range of methods to style background. You can set one or more images to the background of a single element, tile the whole background with one small icon, apply your own gradients or after all, just assign a solid color.

CSS background-color property

By default, the background is transparent. To set a new color for the background use the background-color property. It takes a value of color of any listed format: keywords, hexadecimal, RGB, RGBA, HSL, HSLA.

CSS background-image property

If you want to declare an image to the element’s background, you should use the background-image property. The syntax is straightforward: background-image: url("PATH-TO-THE-IMAGE") It’s considered the good practice to specify the solid color as a fallback in a case when the image cannot be loaded.

CSS background-clip property

Usually, background fills out the whole background area including its padding and border (e.g. dotted or dashed borders) space. You can control this behavior by setting one of the 4 possible values of the background-clip property:

• border-box (default);
• padding-box make background to extend to the outside edge of the padding area, not including borders;
• content-box extends to the inside edge of the padding area, neither padding area nor borders are included;
• text is an experimental value. It enables background to fill out only the foreground text.

CSS background-position property

When an image is less than an element’s background space, the element will be placed in the left upper corner. This is an initial position that can be changed via background-position property. It takes various values – keywords, percentages, length and can be set by 1-4 values. Often only two values are used when the first value represents the horizontal position (x-axis) and the second (y-axis) represents the vertical position. If only one value is set, the second one is assumed to be center.

CSS background-repeat property

If you want to tile a background image, take a closer look at the background-repeat property. At its base, it’s only four values:

• repeat – tile the whole background with a given image;
• no-repeat – no tilling at all;
• space – the first and the last images are pinned to each side of the element and the rest of whitespace is evenly divided between the images;
• round – the images repeat in both directions so there is no whitespace. The images stretch to prevent empty space.

CSS background-origin property

Origin image’s placement calculated with respect to the outer edge of the padding area of the element. This is the default behavior. You can affect this using the background-origin property. It has the following values:

• padding-box is the initial property value. It places background relative to the padding box;
• border-box places background relative to the border box;
• content-box positions background relative to the content box.

CSS background-size property

background-size lets you define the size of the origin image. It can take keywords, length, and percentages as its values. There are only two predefined keywords:

• cover scales an image as much as possible to cover the whole background;
• contain pastes an image to the block without filling out whitespace.

Also you can set the property to any CSS size unit value.

CSS background-attachment property

Using the property background-attachment enables the origin image to be fixed with respect to the viewport. This rewards your background with immunity to the effects of scrolling. There are only 3 values:

• scroll is the default value. The origin image is fixed to the element’s box itself and it scrolls with the content;
• fixed – the origin image does not scroll along with the document;
• local – the background is fixed according to the behavior of the element. If the element has scrolling, the background will scroll with the content, but the background that goes beyond the element remains in its place.

CSS background-blend-mode property

This property lets you define how exactly background-image of an element blends with its background-color or other background images. It can have one of 15 possible values. You can declare its own blend mode on every layer of the background (image and/or color). It’s a really powerful tool if it’s properly used. For example, you can create Instagram-like filters with combining background image and right gradients:

CSS background property

A shorthand property for all background-... properties:

1. background-image;
2. background-position;
3. background-size;
4. background-repeat;
5. background-attachment;
6. background-origin;
7. background-clip;
8. background-color.

The values may have any order, but specification recommends the order mentioned above. Omitted sub-values are set to their initial values.