Backgrounds and borders

Back to the index.

CSS3 backgrounds and borders module.

The backgrounds and borders.

This is the mobile table. See also the desktop table.

Last major update on 5 July 2016.

I'm writing a CSS book.

Backgrounds

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC 10 BlackBerry 10 Dolphin Opera Mini IE 11 Edge 13 Firefox
8 9 8 9 LG Cy HTC S34 Ub MM S44 Xia Op Go 30 33 39 45 51 11 17
background-attachment: fixed
The background image does not scroll; the element serves as a “window” on the background image. 		Static No-scroll No No Static No No No-scroll No Static Buggy Static Buggy Yes
Static
Background image is correctly positioned on page load, but does not change on scrolling.
No-scroll
Works, but you can’t scroll the element.
  • The Samsung Android 4 CRASHES on my test page. No data.
  • Edge uses a kind-of parallax scrolling that’s off.
background-attachment: local
The background image scrolls with the element (and not the document).

External test that disagrees with mine 		Incomplete No No buggy No buggy No Incomplete No Untestable Yes
Untestable
Browser does not support scrollable elements.
Incomplete
Not supported when you also use -webkit-overflow-scrolling: touch.
  • The Samsung Android 4 CRASHES on my test page. No data.
  • The Chromia need a border-radius on the element. This is obviously a bug.
background-clip
States whether the background covers the border-box (default), padding-box or content-box. 		Yes Yes Yes Yes Yes
-webkit-background-clip: text
The background shines through the text, if it’s transparent, and only through the text. 		Yes No Yes Yes Yes Buggy No Yes No
background-color
 Yes Yes Yes Yes Yes
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC 10 BlackBerry 10 Dolphin Opera Mini IE 11 Edge 13 Firefox
8 9 8 9 LG Cy HTC S34 Ub MM S44 Xia Op Go 30 33 39 45 51 11 17
background-image
 Yes Yes Yes Yes Yes
background-origin
States whether the background originates in the border-box, padding-box (default) or content-box. 		Yes Yes Yes Yes Yes Buggy Yes
  • Opera Mini on Android has glitches with the background-image for border-box and content-box.
    (Old note: The Minis on iOS, BlackBerry, and Symbian do not have this bug.)
background-position
States how the background image is positioned. 		Yes Almost Yes Yes Yes Yes Almost Yes
Almost
Browser doesn’t accept right 20px bottom 10px.
background-position-x and -y
States how the background image is positioned in the x or y direction. 		Yes Yes Yes Yes Yes No Yes No
background-repeat
States how the background is repeated. Note the new values space and round. 		Yes Incomplete IC Yes IC Yes Incomplete Yes IC
Incomplete / IC
Browser treats space and round as no-repeat.
background-size
States the size of the background image, in pixels, percents, or with two special values. 		Yes Yes Yes Yes Yes Buggy Yes
  • In Opera Mini contain amd cover are buggy.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC 10 BlackBerry 10 Dolphin Opera Mini IE 11 Edge 13 Firefox
8 9 8 9 LG Cy HTC S34 Ub MM S44 Xia Op Go 30 33 39 45 51 11 17

Other

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC 10 BlackBerry 10 Dolphin Opera Mini IE 11 Edge 13 Firefox
8 9 8 9 LG Cy HTC S34 Ub MM S44 Xia Op Go 30 33 39 45 51 11 17
border-radius
 Yes Yes Yes Yes Yes No Yes
box-decoration-break
 -webkit- No -webkit- -webkit- No -wk- Yes No Yes

Only Firefox supports it on elements in columns.

  • Opera Mini and Firefox use the unprefixed declaration.
box-shadow
 Yes Yes Yes Yes Yes No Yes

Tested browsers

Mobile browser test array 3.1; July 2016

iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.3
iOS 9
WebKit 601
Default browser on iPad 2 with iOS 9.3.2
iOS 8 WebView
WebKit 600
Chrome/iOS on iPhone 4S with iOS 8.3
iOS 9 WebView
WebKit 601
Chrome/iOS on iPad 2 with iOS 9.2.1
Android WebKit 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Android 4 WebView
WebKit 534
WebView on Samsung Galaxy Note I, Android 4.1.2
WebView on Sony Xperia S, Android 4.1.2
WebView on HTC One X, Android 4.2.2
WebView on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
All these WebViews were tested with the HTML5Test Android app.
Chromium LG 30
Blink; Chromium 30
Default browser on LG L70, Android 4.4.2
Chromium Cyanogen 33
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium HTC 33
Blink; Chromium 33
Default browser on HTC M8, Android 6.0
Chromium Samsung 34
Blink; Chromium 34
Default browser on Samsung Galaxy S4, Android 5.0.1
Chromium Ubuntu 35
Blink; Chromium 35
Default browser on Ubuntu Phone 15.04
Chromium Micromax 39
Blink; Chromium 39
Default browser on Micromax Canvas Nitro 3 Android 5.1
Chromium Samsung 44
Blink; Chromium 38
Default browser on Samsung Galaxy S6, Android 5.1.1
Chromium Xiaomi 46
Blink; Chromium 46
Default browser on Xiaomi M2, Android 5.0.2
Chromium Opera 50
Blink; Chromium 50
34 on LG L5, Android 4.1.2
Chromium Google 51
Blink; Chromium 51
Default browser on Motorola Moto G, Android 5.1
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
Chromium WebView 30
Blink; Chromium 30
WebView on LG L70, Android 4.4.2
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 33
Blink; Chromium 33
WebView on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium WebView 39
Blink; Chromium 39
WebView on Micromax Canvas Nitro 3 Android 5.1
Chromium WebView 45
Blink; Chromium 45
WebView on HTC M8, Android 6.0
Chromium WebView 51
Blink; Chromium 48
WebView on Samsung Galaxy S6, Android 5.1.1
All these WebViews were tested with the HTML5Test Android app.
UC 10
WebKit 534
UC 10.10.5 on Samsung Galaxy S6, Android 5.1.1
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.3.2)
Dolphin
Probably WebKit
Dolphin 11.5.7 with JetPack on Intex Agua Super, Android 5.1.
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
It claims to be a Chromium 33, but it lies.
Opera Mini 11
Presto
Proxy browser
11 on Intex Agua Super, Android 5.1. It is the default browser on this device; that’s why included this old version
Opera Mini 17
Presto
Proxy browser
15 on Samsung Galaxy S4, Android 5.0.1
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Edge 13
Edge
Default browser on Nokia Lumia 830, Windows 10 Mobile
Firefox Android
Gecko 47
47 on Motorola Moto G, Android 5.1