KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

Next-Gen App & Browser
Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

Start free with Google Start free with Email

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 : 2023-03-20

Browser Versions

Edge

Firefox

Chrome

Safari

Opera

5.5 - 8

9 - 11

12 - 111

2 - 12

13 - 113

4 - 24

25 - 114

3.2 - 6

7.1 - 16.4

9.5 - 10

10.5 - 95

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-113, and not supported on 2-12 Firefox versions.

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

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

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

CSS background-position edge offsets on Safari on iOS is fully supported on 7-16.4, 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-111, and not supported on 2.1-4 Android Browser versions.

CSS background-position edge offsets on Opera Mobile is fully supported on 11.5-73, 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.

Test on 3000+ browsers for CSS background-position edge offsets & more

Test your website for CSS background-position edge offsets and other web technologies. Get 100 FREE automation test minutes!

Test Now