Background-size - CSS Property
Summary of characteristics of the background-size property
auto | contain | coverautoRepeatable list.Per grammar: serialization in the order of syntax.Syntax diagram of background-size.
background-size property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
xandyare positive or zero numerical values, followed by one of CSS dimension units.%xis a percentage calculated based on the width of the element.%yis calculated relative to the height of the element.- If there are multiple backgrounds, the values can be repeated, separating them with a comma.
Description of the background-size property.
background-size eis the CSS property that defines the dimensions of the background image.
The behavior of the background-size property is closely linked to whether or not dimensions are set in the chosen background (intrinsic dimensions).
- Images (jpeg, jpg, png, gif files...) necessarily have intrinsic dimensions.
- Gradients don't have any intrinsic dimensions.
- SVG files may or may not have intrinsic dimensions.
If you want to check out general explanations about backgrounds in CSS, refer to the page background.
Values for background-size.
- background-size: auto;
autois the default value forbackground-size.
If the background is an image, so with intrinsic dimensions, the background dimensions will be those of the original image.
If the chosen background doesn't have intrinsic dimensions, theautovalue is equivalent tocontain.background-size:auto;PNG file (with intrinsic dimensions).background-size:auto;SVG file without intrinsic dimensions. - background-size: cover;
With the value
cover,background-sizeresizes the background to cover the entire area of the element.
If the aspect ratio of the background image is different from that of the element, part of the image won't be displayed.background-size:cover;PNG file (with intrinsic dimensions).background-size:cover;SVG file without intrinsic dimensions. - background-size: contain;
The background is resized to be fully visible.
If the background is an image and the image's ratio is different from that of the element, the image may be repeated or part of the element might not be covered by the image (seebackground-repeatto manage background repetition).background-size:contain;PNG file (with intrinsic dimensions).background-size:contain;SVG file without intrinsic dimensions. - background-size: 100px;
background-sizeused with a single numeric value: a number, positive or zero, with its unit of measurement (see CSS dimension units). If it's a percentage, it will be calculated relative to the element's width.
This value will be used to size the background image's width.
The height will be calculated to keep the original image's proportions.background-size:50%;PNG file (with intrinsic dimensions).background-size:50%;SVG file without intrinsic dimensions. - background-size: 100px 50px;
background-sizeused with two numeric values separated by a space. Two numbers, positive or zero, with their unit of measurement (see CSS dimension units).
The first value indicates the width of the background; the second value its height.
If these are percentages, the first one is calculated relative to the element's width, and the second relative to its height.background-size:50% 100%;PNG file (with intrinsic dimensions).background-size:50% 100%;SVG file without intrinsic dimensions. - background-size: 100px 50px, cover, 100% 100%;
background-sizeused with a series of values, each of them separated from the others by a comma. This syntax can be used when multiple backgrounds have been defined. Refer to the pagebackground.background-size:25%,100%; - background-size: initial; (
auto) background-size: inherit; background-size: revert; background-size: revert-layer; background-size: revert-rule; background-size: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the background-size property.
The animation of background-size can be done gradually if you only use numeric values (no predefined values like cover or contain).
Access the background-size property via a program
Change the background size with Javascript.
In JavaScript, the value of the property background-size can be changed with one of the codes below. You can see that JavaScript offers a syntax with
the {abbrKebabCase} notation typical of CSS (a dash to separate words), and another syntax with the camel-case notation more common in JavaScript
(a capital letter to separate words).
let el = document.getElementById('id');
el.style['background-size'] = 'cover';
// or
let el = document.getElementById('id');
el.style.backgroundSize = 'cover';
Read the background size in Javascript.
In JavaScript, here's how to read the value of background-size. The value can only be retrieved if the property was assigned directly to the element
itself, not via a CSS selector. The value is returned exactly as it was set (a keyword, a pair of values, etc.).
let el = document.getElementById('id');
let value = el.style['background-size'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundSize;
Read the computed value of background-size in Javascript.
The computed value of background-size can be found with the following code. The result is either a keyword (auto, cover,
contain, etc.) or a pair of numerical values in pixels, regardless of the unit used in the style sheet.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-size');
Read or change the background size with JQuery.
With jQuery, here's a code example to read or modify the value of the background-size property.
// Read the value:
$('#id').prop('background-size');
// Write the value:
$('#id').prop('background-size', 'cover');
$('#id').prop('{background-size': 'cover'});
Read the computed value of background-size with JQuery.
With JQuery, reading the computed value of the background-size property can be done with the following code.
let value = $('#id').css('background-size');
Other code examples.
Find more examples of Javascript and JQuery code on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the background-size property and then display either the value as it was applied or the computed value.
This second option lets you see how the value of background-size is stored (serialized). You’ll notice in particular that percentages are correctly
stored as percentages (see the chapter on inheritance). All other units are converted to pixels.
Predefined values, of course, are kept as they are.
Simulator.
Browsers compatibility with background-size.
The background-size property doesn’t have any compatibility issues across all current browsers.
background-size property to set the size of background images.background-sizeproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the background-size property.
-
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.Regardingbackground-sizeInitial definition of thebackground-sizeproperty.
August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
See also, about backgrounds.
Everything related to backgrounds and borders is described in the specification CSS Backgrounds and Borders Module of the W3C. Here are the main properties described in this standard.
Properties:
