Power Your Software Testing with AI and Cloud

Supercharge QA with AI for Faster & Smarter Software Testing

CSS background-position edge offsets

Allows CSS Background images to be positioned relative to the edge of a box using offsets specified in the three to four value syntax.

Last updated on : 2026-02-09

Browser Versions

Edge

Firefox

Chrome

Safari

Opera

5.5 - 8

9 - 11

12 - 144

2 - 12

13 - 150

4 - 24

25 - 147

3.2 - 6

7.1 - 26.3

9.5 - 10

10.6 - 125

Fully Supported

Partially

No Support

Formal Definition

Inherited

Applies to

all elements. It also applies to ::first-letter and ::first-line.

Percentages

refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets

Initial value

0% 0%

Animation type

repeatable list of simple list of length, percentage, or calc

Computed value

background-position-x: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword background-position-y: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword

Specifications

CSS Backgrounds and Borders Module Level 4 # background-position

Syntax

/* Keyword values */
 background-position: top;
 background-position: bottom;
 background-position: left;
 background-position: right;
 background-position: center;
 /* <percentage> values */
 background-position: 25% 75%;
 /* <length> values */
 background-position: 0 0;
 background-position: 1cm 2cm;
 background-position: 10ch 8em;
 /* Multiple images */
 background-position: 0 0, center;
 /* Edge offsets values */
 background-position: bottom 10px right 20px;
 background-position: right 3em bottom 10px;
 background-position: bottom 10px right;
 background-position: top right 10px;
 /* Global values */
 background-position: inherit;
 background-position: initial;
 background-position: revert;
 background-position: unset;

Browser Compatibility

CSS background-position edge offsets on IE is fully supported on 9-11, and not supported on 5.5-8 IE versions.

CSS background-position edge offsets on Edge is fully supported on all Edge versions.

CSS background-position edge offsets on Firefox is fully supported on 13-150, and not supported on 2-12 Firefox versions.

CSS background-position edge offsets on Chrome is fully supported on 25-147, and not supported on 4-24 Chrome versions.

CSS background-position edge offsets on Safari is fully supported on 7.1-26.3, and not supported on 3.2-6 Safari versions.

CSS background-position edge offsets on Opera is fully supported on 10.6-125, and not supported on 9.5-10 Opera versions.

CSS background-position edge offsets on Safari on iOS is fully supported on 7-26.3, and not supported on 3.2-6 Safari on iOS versions.

CSS background-position edge offsets on Android Browser is fully supported on 4.4-144, and not supported on 2.3-4 Android Browser versions.

CSS background-position edge offsets on Opera Mobile is fully supported on 11.5-80, and not supported on 10-10 Opera Mobile versions.

CSS background-position edge offsets on Chrome for Android is fully supported on all Chrome for Android versions.

CSS background-position edge offsets on Firefox for Android is fully supported on all Firefox for Android versions.

CSS background-position edge offsets on Samsung Internet is fully supported on all Samsung Internet versions.

Browser Support for CSS background-position edge offsets

CSS background-position edge offsets on Chrome

CSS background-position edge offsets on Safari

CSS background-position edge offsets on Firefox

CSS background-position edge offsets on Internet Explorer

CSS background-position edge offsets on Opera

CSS background-position edge offsets on Edge

References

Data sourced from

100

High

Overall Browser Compatibility Score

Note:CSS background-position edge offsets shows a browser compatibility score of 100. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.