Background - CSS Property
Summary of characteristics of the background property
Per grammar: serialization in the order of syntax. 1Description 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.
- The background image (
- 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-modeproperty for this. - background: url('image.png') center / 40px 40px no-repeat;
This syntax defines a background image, centered, with dimensions of 40 pixels by 40 pixels, and that is not repeated.
- background: initial; background: inherit; background: revert; background: revert-layer; background: revert-rule; background: unset;
Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
General rules on backgrounds.
A background consists of a color and/or one or more images. 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-imagehas 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-repeatin our example. - If properties have additional parameters, they will be ignored. In our example,
background-sizehas 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-positionin the example, the browser assigns values by cycling through those that are available. Thus,image1will have the positionborder-box,image2the positioncontent-box, andimage3will be positioned onborder-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
This last one will be visible if the image cannot be found or if it has transparent parts.
with precision on its positioning and repetition.
Access the background property via a program
Set the background with JavaScript.
In JavaScript, here are two syntaxes to modify the value of background.
let el = document.getElementById('id');
el.style['background'] = "url('img/background-1.png') center / contain repeat red";
// or
let el = document.getElementById('id');
el.style.background = "url('img/background-1.png') center / contain repeat red";
With Javascript, read the value of background.
The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['background'];
// or
let el = document.getElementById('id');
let value = el.style.background;
With Javascript, read the computed value of background.
The computed value is the one that comes from evaluating the relative units (except the percentage) and possibly taking inherited values into account. In any case, the computed value is always defined: it's the initial value of the property.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background');
With JQuery, read or change the value of background.
JQuery is a JavaScript library that often allows shorter syntax than JavaScript itself.
// Read the value:
$('#id').prop('background');
// Write the value:
$('#id').prop('background', "url('img/background-1.png') center / contain repeat red");
$('#id').prop('{background': "url('img/background-1.png') center / contain repeat red"});
With JQuery, read the computed value of background.
let value = $('#id').css('background');
Other codes.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the background property and then display either the value as it was applied or the computed value.
This second option can show something quite different from what was entered. Check the individual properties for more details on each value.
Browsers compatibility with background.
Managing backgrounds, whether unique or multiple, is no longer a problem with current browsers.
background shorthand property.Notes:
(1) SVG images appear blurry when scaled.
backgrounds
backgroundproperty
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
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
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
RegardingbackgroundFirst definition of thebackgroundshorthand property, grouping the values ofbackground-color,background-image,background-repeat,background-attachmentandbackground-position.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
RegardingbackgroundThebackgroundproperty accepts theinheritvalue (like all other properties).November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.RegardingbackgroundMultiple backgrounds possible.
Thebackgroundshorthand property also allows you to define new properties relating to backgrounds.August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation. -
CSS Backgrounds and Borders Module Level 4
Level 4 of the specification introduces logical values that depend on the writing mode.
RegardingbackgroundThe shorthandbackgroundproperty now includes values that depend on the writing mode.November 25, 2025Working Draft.
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.
Properties: