Background-position - CSS Property
This page is also about physical property(ies):
And the logical properties:
Summary of characteristics of the background-position property
bottom | center | left | right | top0Repeatable list.Per grammar: serialization in the order of syntax. (1)For example,
top left is valid, while 0% left is not.
Syntax diagram of background-position.
background-position 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 numerical values followed by one of CSS dimension units.%are percentages that resolve in one dimension. They are calculated based on the width of the background area minus the image width for the first one, and the height of the background area minus the image height for the second.- The first group of values is about horizontal positioning, and the second group is about vertical positioning.
- The whole syntax can be repeated as many times as there are defined backgrounds, with each occurrence separated by a comma.
Description of the background-position property.
background-position defines how the background is positioned relative to the element.
If the background is repeated across the entire surface, the background-position property simply causes an offset of the pattern.
It's a shorthand property to replace the properties:
background-position-xbackground-position-yTwo values can therefore be used with background-position, the first for horizontal positioning and the second for vertical positioning.
When only one of the two values is specified, the other is assumed to be center.
By default (if background-position is not used) the background is positioned at the top left of the element.
Refer to the page on les arrière-plans for general explanations about backgrounds. And further down on that page for information on precise background positioning.
Values for background-position.
- background-position: left; background-position: center; background-position: right;
These three values define the horizontal positioning of the background. Without any additional indication, the vertical positioning will then be set to
center. - background-position: top; background-position: center; background-position: bottom;
These three values define the vertical positioning of the background. Without any further indication, the horizontal positioning will be set to
center. - background-position: right top;
To specify the background positioning in both directions, you need to provide two values, separated by a space. As long as they are predefined values, they can be entered in any order: in fact,
rightandleftclearly indicate horizontal positioning, whiletopandbottomcorrespond to vertical positioning. - background-position: right 10px bottom 20%;
The values we saw earlier can be followed by a positive or negative number, with a unit of measurement. See CSS dimension units or a percentage.
Positive values move the background toward the center of the element, while negative values move it outward. Check out the explanations further down on this page about precise background positioning.As soon as a numeric value is present, the order of entry is important: first horizontal positioning, then vertical positioning.
- background-position: 10% 30px;
Two numerical values, positive or negative, with a unit of measurement or two percentages. They define the horizontal and vertical positioning of the background, respectively.
This syntax is equivalent to
left 10% top 30px - background-position: right top, center top;
The comma is used to separate information about different backgrounds. Refer to our explanations on arrière-plans multiples.
- background-position: initial; (
0) background-position: inherit; background-position: revert; background-position: revert-layer; background-position: revert-rule; background-position: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
To get into the details.
To be precise, background-position positions the background relative to a reference point, which is itself defined by the background-origin property.
By default, this reference point is located in the top-left corner of the element, excluding the border.
The left top values position the background at this reference point, while the right bottom values position it at the symmetrical point,
located at the bottom right of the element.
for
left and top
for
right and bottomThe following syntax will position the left side of the background image 10 pixels to the right of the first reference point, and the bottom of the image 20 pixels above the second reference point.
background-position: top 10px bottom 20px;
Things get complicated if these dimensions are given in percentages. You first need to define what the background area is: it's the area between the two reference points.
The horizontal percentage is calculated relative to the width of the background area minus the background image width.
The vertical percentage is calculated relative to the height of the background area minus the background image height.
This complication has advantages: 50% corresponds to a background image centered on the element, which is pretty intuitive.
On the other hand, left 100% is equivalent to right.
Animation of the background-position property.
Background positioning properties can be easily animated. The example below is an animation along the horizontal axis (property background-position-x).
The impression of a continuous scroll comes from the fact that the element's width (300 pixels) is an exact multiple of the image's width (150 pixels).
The effect is enhanced by a linear easing function (animation-timing-function:linear).
Access the background-position property via a program
Change the background position in JavaScript.
Here's how to change the value of background-position. JavaScript accepts two syntaxes:
- With the typical CSS notation, in
kebab-case(a dash to separate the words). - And with camel-case notation, more common in JavaScript (a capital letter to separate words).
let el = document.getElementById('id');
let value = el.style['background-position'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundPosition;
Read the background position in Javascript.
This code reads the value of background-position assigned in the HTML code, via the style attribute (or through Javascript code like the one above).
But it doesn’t pick up the value of the property if it has been set through a CSS selector.
let el = document.getElementById('id');
let value = el.style['background-position'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundPosition;
Read the computed value of background-position in Javascript.
The computed value is the one that comes from the cascade of inheritances: the value on the element itself, the inherited value, the initial value.
The value is returned as two dimensions in pixels, or as two percentages, even if the property was assigned with a predefined term like
center, for example.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-position');
Read or write the value of the background-position property with JQuery.
// Read the value:
$('#id').prop('background-position');
// Write the value:
$('#id').prop('background-position', 'center top');
$('#id').prop('{background-position': 'center top'});
Read the computed value of the background-position property with JQuery.
The value is returned as either two percentages or two pixel dimensions, the first for horizontal positioning and the second for vertical positioning.
let value = $('#id').css('background-position');
Other codes.
The page Javascript and CSS gives you other examples of Javascript and JQuery code.
Test it yourself.
The buttons below apply the entered value to the property background-position and then display either the value as it was applied or the computed value.
This second option allows you to see how the value of background-position is stored (serialized). In particular, you can see that predefined values are
stored as percentages, and all dimension units are converted to pixels.
Simulator.
This simulator is useful for understanding the logic behind percentage calculations.
The image is 150x150 pixels, and on a PC screen, the element is about 750 pixels wide.
If we request a horizontal position at 30%, the calculation is as follows:
30% x (750 - 150) = 180 pixels, which is roughly 24% of the element's width.
Give it a try: you’ll see that the left edge of the image is indeed about 24% on the scale.
But in any case, 50% places the image in the middle of the element.
Browsers compatibility with background-position.
No compatibility issues to report: all browsers properly support the background-position property.
background-position property to position the background.Example:
background-position:right 10px bottom 20px;.background-positionproperty
relative to sides
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the background-position property.
-
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.
Regardingbackground-positionInitial definition of thebackground-positionproperty.
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.
Regardingbackground-positionNo change to thebackground-positionproperty.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.Regardingbackground-positionNo change to thebackground-positionproperty.August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
See also, about backgrounds.
Everything about backgrounds and borders is described in the W3C specification "CSS Backgrounds and Borders Module". Here are the main properties described in this standard.
Properties:
