Backgrounds and borders

Back to the index.

CSS3 backgrounds and borders module.

The backgrounds and borders.

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

Last major update on 1 July 2016.

I'm writing a CSS book.

Backgrounds

Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
States whether the background image scrolls with the document, the element, or not at all. Incomplete Yes Yes Yes Incomplete Yes Yes Buggy
Incomplete
browser does not support local.
Incorrect
scroll means local.
  • local doesn’t work on Chrome/Windows 10, while it does work on Windows 7. Like on Android, Windows 10 needs a border-radius added to the element (and no, 0 is not enough.)
  • On UC fixed works as normal, except that when you scroll the element the background also scrolls.
States whether the background covers the border-box (default), padding-box or content-box. No Yes Yes Yes Yes Yes Yes
The background shines through the text, if it’s transparent, and only through the text. No Yes No Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes
Incomplete Yes Yes Yes Yes Yes Yes
  • IE8 and lower do not support multiple background images.
Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
States whether the background originates in the border-box, padding-box (default) or content-box. No Yes Yes Yes Yes Yes Yes
States how the background image is positioned. Almost Yes Yes Yes Yes Yes Yes
  • IE8 doesn’t support the right 20px bottom 10px syntax.
States how the background image is positioned in the x or y direction. Yes No Yes Yes Yes Yes
States how the background is repeated. Yes Incomplete Yes Yes Yes Yes

Firefox doesn’t support space and round.

States the size of the background image, in pixels, percents, or with two special values. No Yes Yes Yes Yes Yes Yes
Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac

Other

Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
No Yes Yes Yes Yes Yes Yes
No Yes -webkit- -webkit- -webkit- -webkit-

Only Firefox supports it on elements in columns.

No Yes Yes Yes Yes Yes Yes

Tested browsers

Desktop browser test array 3.0; July 2016

IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations as downloaded from Modern IE.
IE11
Trident
On Windows 8.1 virtualization as downloaded from Modern IE.
Edge 13
MS Edge 13
On Surface Book with Windows 10.
Firefox 47
Gecko 47
47.0.1 on Win10 and Mac
Safari 9.1.1
WebKit
9.1.1 on Mac
Chrome 51
Chromium 51
51 on Win10 and Mac
Opera 38
Chromium 51
38 on Win10 and Mac
UC 5.6
Chromium 48
5.6 on Windows 7

Operating systems

Mac
Mac Mini with OS 10.11.15
This is my main test station. It also runs all virtual Windows systems.
Windows 7 and 8.1
All downloaded from modern.ie. I use Parallels, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
Windows 10
Microsoft Surface Book with Windows 10

Not tested

I did not test border-image because it’s WAY too complicated.