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 March 2013.

Backgrounds

` `
Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mobile 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
background-attachment: fixed
The background image does not scroll; the element serves as a “window” on the background image. 		Static No-img Static 4.1 No Static No No Static Jumpy Buggy No-img* Yes No-img Static Jumpy*
Jumpy
Image is readjusted after scrolling or zooming stops.
Static
Background image is correctly positioned on page load, but does not change on scrolling.
No-img
Behaves static after a scroll and jumpy after a zoom. In addition, after a zoom any part of the element that is off-screen does not have a background-image until the next zoom-induced readjustment.
  • The Samsung Android 4 doesn’t support fixed; the HTC does. This seems to be an Android version thing: 4.1 and up support fixed.
  • UC is weird. On page load it does not display the image at all, except for some pixels. It may move to static after that, but after a pinch-zoom it suddenly behaves perfectly.
  • NetFront is no-img, but also after a scroll.
  • Firefox scrolls the image rather than jumping.
background-attachment: local
The background image scrolls with the element (and not the document). 		Yes Untestable No Yes Untestable Yes Untestable Yes Buggy Untestable No Yes Yes No
Untestable
Browser does not support scrollable elements.
  • Symbian Belle moves part of the background image when you scroll the element, but the rest only moves when you scroll outside the element.
background-clip
States whether the background covers the border-box (default), padding-box or content-box. 		Yes No Incomplete Yes Yes Incomplete Yes Buggy Incomplete Yes Incomplete Yes Yes
Incomplete
Browser doesn’t support content-box.
  • Xpress sets background-origin to the same value as background-clip. In addition, it does not support background-origin. Among other things, this means that the default origin is border-box.
background-color
 Yes Yes Yes Yes Yes Yes Yes
Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mobile 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
background-image
 Yes Yes Almost Yes Yes Buggy Yes Yes Yes
  • Opera Mini on BlackBerry has a bug where it stretches up the background image to fit the element exactly. This is not what should happen. The Minis on iOS, Android, and Symbian do not have this bug.
  • Xpress does not support multiple background images. Also, it places the single background image it shows in the place of the second one.
background-origin
States whether the background originates in the border-box, padding-box (default) or content-box. 		Yes Yes Almost Yes Yes No Yes Yes Yes
  • Opera Mini on Android has glitches with the background-image for border-box and content-box. The Minis on iOS, BlackBerry, and Symbian do not have this bug.
  • Xpress: see background-clip.
background-position
States how the background image is positioned. 		Yes Almost Yes Yes Almost Yes YesAlmost YesAlmost Yes Yes
Almost
Browser accepts top 75px, which should not work.
background-repeat: no-repeat, repeat-x, repeat-y
States how the background is repeated. Note the new values space and round. 		Yes Yes Yes Yes Yes Yes Yes
background-repeat: space, round
States how the background is repeated. Note the new values space and round. 		Buggy Buggy Yes Buggy Yes Buggy Buggy Yes No
Buggy
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 Incomplete Yes Yes No Yes Buggy Yes Yes Yes
  • In Opera Mini contain amd cover are buggy.
  • Symbian Anna treats all examples as if they have kind-of background-attachment: fixed. It even tries to adjust the position of the contain background image.
Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mobile 6 7 PB 10 Xpress MeeGo Anna Belle 9 10

Other

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mobile 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
border-radius
 Yes Yes No Yes Yes No Yes Yes Yes
box-decoration-break
Prefixed in WebKit 		No No Incomplete No Yes No No Yes No No

No browser supports it on elements in columns.

  • Opera applies the border but not the padding. It uses the unprefixed declaration.
box-shadow
 Yes No Yes No Yes No Yes No Yes No Yes Yes

Tested browsers

Mobile browser test array 1.0.2; March 2013

iOS 5
WebKit 534
Default browser on iPad 2 with iOS 5.1.1
iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Sony Xperia S, Android 2.3.7
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on HTC One X, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.0.3
Chrome
WebKit 535
18 on Nexus 7, Android 4.2.1
Opera Mini
Presto
Proxy browser
7.5 on Samsung Galaxy Note I, Android 4.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia E71 (SymbianOS/9.2)
7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile
Presto
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7, Symbian Anna
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on Dev Alpha A device with OS 10.0.9
Xpress
Gecko
Proxy browser
2.3 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. And who knows? Ex-Nokia people have good operator contacts.
Anna
WebKit 533
Default browser on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser on Nokia PureView 808, Symbian Belle SP2
The most recent Symbian build.
UC
WebKit 533
UC 8.6.1 on Packard Bell tablet, Android 3.2.1.
The largest Chinese browser. I’m testing the full variant, not the proxy.
NetFront
WebKit 530
NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7
NetFront, by the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
WebKit 534
3.5.2 on HTC One X, Android 4.1.1
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
Tizen
WebKit 537
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.
Firefox
Gecko
18 on HTC One X, Android 4.1.1

General note on One, NetFront, and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones or game consoles.I’m working on getting more representative test devices.

Browsers by WebKit version:

530
NetFront
533
Android 2
Anna
UC
534
iOS5
Android 3 and 4
BlackBerry 6 and 7
MeeGo
Dolphin
One
535
Chrome
Belle
536
iOS6
BlackBerry PlayBook
537
BlackBerry 10
Tizen