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

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
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
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.

Other

[an error occurred while processing this directive] [an error occurred while processing this directive]
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

[an error occurred while processing this directive]