`Background` - Property CSS

background

Summary of characteristics of the `background` property

Quick description

Summary of background properties.

Status

Standard

Usable for

HTML

Percentages

See individual properties.

Initial value

See individual properties.

Inherited by default

No.

Animation type

See individual properties.

W3C Module

CSS Backgrounds and Borders Module

References (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Document status: CR (Candidate Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Description of the `background` property.

background is a property of the CSS language that defines all the parameters of backgrounds. These can consist of a simple color, an image, a gradient, or a combination of several of these layers.

background is a shorthand property that combines several properties defining the background. The values are separated by spaces.

The order of values is not very important because the possible values differ from one property to another, except for background-position and background-clip which must be mentioned in this order. A slash introduces the value or values for the background dimension.

background-image: Defines the background image or gradient (multiple images or gradients can coexist).
background-position : Defines how the background image is positioned.
background-size : Sizing the background image.
background-repeat : Defines how the background image is repeated.
background-attachment : Background image scrolling mode.
background-origin: Defines a reference to position the background image.
background-clip : Defines the extent of the background, especially in relation to the border and padding.
background-color: Sets the background color.

You can refer to these different properties to know their exact syntax.

Values for `background`.

background: url('image.png') bottom left / contain repeat scroll border-box content-box #f04218;

This syntax is the most comprehensive of background. It includes the values of all the properties it represents, that is to say:
- The background image (image.png).
- The XY position of this image (bottom left).
- After the slash, the size of the image (contain).
- The repeat mode (repeat).
- The scroll mode (scroll).
- The reference for positioning the image (border-box).
- The extent of the image: does it cover padding, border, etc. (content-box).
- Finally, the color (#f04218), which will only be visible through the transparent parts of the image, or if the image is not found.
All values, except for the image, are optional: if omitted, they are set to their initial value.

Refer to the detailed properties for more information on these different values.
background: linear-gradient(90deg,transparent,blue) #f04218;

This syntax defines a gradient (instead of an image) and a color. The latter will be visible since the gradient has a transparent part.

For more details on gradients, refer to the pages linear-gradient(), conic-gradient() , and radial-gradient() , or to the pages on repeating gradients.
background: url('image1.png') ... , url('image2.png') ... yellow;

This syntax defines two background images and a color. A comma separates the images with their settings. If there can be multiple images, the color, however, will be the last mentioned and will be unique.

The first image mentioned is above the others. Then comes the second, and so on, until the color that is behind all the images. These images or gradients can simply be overlaid, but they can also be blended together. See the background-blend-mode property for this.
background: initial; background: inherit; background: revert; background: revertLayer; background: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

General rules on backgrounds.

A background consists of a color and/or an image. If both are defined, the color is placed underneath the image: it will be visible in the transparent parts of the image, or if the image is not found, or next to the image if it is smaller than the element and not repeated.
The color can also be blended with the image (see background-blend-mode ).

Example: the background of the element below is made up of a color (lightBlue) and an image (a white circle with transparency around it).

The image can be replaced by a gradient. Six functions allow you to define a gradient: conic-gradient() , linear-gradient(), radial-gradient() and their variants in repeating gradient.

Multiples backgrounds.

Principle.

It is possible to define multiple backgrounds for the same element. These backgrounds overlap in the order they are declared, with the first one on top. The subsequent backgrounds are therefore not visible, except in the following cases:

One or more of the first images could not be found.
The first images contain transparent areas.
A blend between the different backgrounds has been planned with the property background-blend-mode .

Each of the properties related to backgrounds can then have a series of values separated by commas, each of these values corresponding to one of the backgrounds.

The property background-color does, however, make an exception: only one background color can be defined, with the last background. It will be common to all backgrounds.

Here is an example of two backgrounds created with the images below. In the image background-2.png all the non-blue parts are transparent.

background-1.png

background-2.png

Different numbers of values.

How will the browser handle the situation if the number of values differs from one property to another?
In our example below, background-image has three values, while background-size has four, and background-position has only two.


	background-image: 
	   url('image1.png'), 
	   url('image2.png'), 
	   linear-gradient(0,blue,lightblue);
	background-repeat: 
	   repeat, 
	   repeat, 
	   no-repeat;
	background-size: 
	   contain, 
	   cover,
	   cover,
	   contain;
	background-position: 
	   border-box, 
	   content-box;

Here are the rules:

The property used as a reference for counting the backgrounds is background-image. In our example, background-image has 3 values.
If the other properties have the same number of values, things are simple: we assign each value to the corresponding background. This is the case with background-repeat in our example.
If properties have additional parameters, they will be ignored. In our example, background-size has four values. The last one will not be applied to any of the backgrounds: it will be ignored.
Finally, in the case where properties have fewer values, like background-position in the example, the browser assigns values by cycling through those that are available. Thus, image1 will have the position border-box, image2 the position content-box, and image3 will be positioned on border-box (it returns to the first value).
The consequence is that if only one value is defined for any of the properties, it will apply to all backgrounds.

Note: Defining a color and an image does not create two backgrounds.

Omitted values.

The shorthand property background defines all the values: when a value is not specified, it is set to its initial value. Therefore, there is always the same number of values for each background parameter.

In the example below, image2 and image3 will be repeated (the initial value for background-repeat is repeat).


	background: 
	   url('image1.png') no-repeat,
	   url('image2.png'),
	   url('image3.png');

Examples with the `background` property.

Click on the buttons to display the CSS codes.

Background defined by a color

Background defined by an image

Background defined by an image AND a color.
This last one will be visible if the image cannot be found or if it has transparent parts.

Background defined by an image,
with precision on its positioning and repetition.

Background defined by a gradient
See the function linear-gradient().

Browsers compatibility with `background`.

Managing backgrounds, whether unique or multiple, is no longer a problem with current browsers.

Column 1

Support multiple backgrounds.

Column 2

Supporting the background shorthand property.

Column 3

Support for SVG images used in the background of an element.

Notes:

(1) SVG images appear blurry when scaled.

Multiples
backgrounds

background
property

SVG

Estimated overall support.

97%

96%

98%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `background` property.

The shorthand property background evolves to follow the new possibilities of backgrounds introduced by the level 3 specification. Mainly multiple backgrounds, but also the addition of new features of backgrounds: dimensions (background-size), origin (background-origin), and possible clipping background-clip.

Cascading Style Sheets specification - Version 1

First definition of the background shorthand property, grouping the values of background-color, background-image, background-repeat, background-attachment and background-position.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

The background property accepts the inherit value (like all other properties).

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Backgrounds and Borders Module Level 3

Multiple backgrounds possible.
The background shorthand property also allows you to define new properties relating to backgrounds.

August 02, 2002
Working Draft.
December 17, 2009
Candidate Recommendation.

Voir aussi, au sujet des arrière-plans.

The specification of W3C "CSS Backgrounds and Borders Module" includes everything related to borders and backgrounds. To facilitate your research, we list below the main properties related.