• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Background Properties > background-clip Property

14.9. background-clip Property

This property is designed to control whether a background extends into the border area — meaning the natural “padding” value that most browsers by default will indent the content of a Web page — or not.

This property comes with two values: border and padding. By default the value is border, which means that the browser tiles the image beginning at the top-left position of the Web page (coordinates 0,0 of the element in absolute terms). If the value is set to padding, the background is clipped (not repositioned) so that the border area around the page is transparent. The following code snippet shows how it might be used:

table.example1 {background-image: url("caligula.jpg")   
background-clip: padding}
table.example2 {background-image: url("caligula.jpg")   
background-clip: border}

The primary purpose for this property would seem to be to enable Web authors to retain a transparent border setting even when a background image has been applied. While this would make the element “stand-out,” it would be particularly useful when applied to block elements that display a visible border, as the lines demarking the object would be clear, making individual elements contained with the border (such as cells in a table) more distinct. The following mock-up illustration (Figure 14-14) makes this feature of the property clear.

Figure 14-14. Mock-up illustrating the possible effects of the background-clip property.

In the mock-up example illustrated in Figure 14-14, you can clearly see the difference between the border and padding values: with border the background image extends into the border area, and with padding it is clipped at the border edge.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint