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

14.10. background-origin

This property will be used to set the initial status for how the background-position property will be calculated. Like background-clip, it takes the border and padding values, plus one additional value: content. The default value is padding, telling background-position that any background image will begin within the padding zone (i.e., the top-left, or coordinates 0,0 of a given element). When border is used, the browser is supposed to start tiling an image within the border zone. Finally, the content value tells the browser to position the background image so that it starts at the top-left of the content contained within an element, which is typically indented slightly from the outside edges of the “box” it is contained within.

The following code snippet shows how it might be used:


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

table.example2 {background-image: url("caligula.jpg")   
background-clip: padding; background-origin: content}

table.example3 {background-image: url("caligula.jpg")   
background-clip: padding; background-origin: border}


Figure 14-15 is a mock-up that shows how this sample code might be rendered in a compliant browser.

Figure 14-15. Mock-up illustrating the intended effects of the background-origin property.

The mock-up shows the intended effects clearly: with padding the image begins tiling within the area of the border; with content the background only begins to tile at the beginning of the text content of the table, and with border the background image begins to tile within the border of the table.

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