8 : Background Images

Examples

  • Figure 8-1: background-repeat values: repeat, space, and round.
  • Figure 8-2: Different background-repeat values applied to the horizontal and vertical.
  • Figure 8-3: Two background images on the same element.
  • Figure 8-4: Example of multiple resized background images.
  • Figure 8-5: background-size keywords: contain and cover.
  • Figure 8-6: Showing the effect of different values on the background-clip property: border-box, padding-box, and content-box.
  • Figure 8-7: The background-origin property with values of border-box, padding-box, and content-box.
  • Figure 8-a: Showing the local value for background-attachment, compared to scroll and fixed.

Browser Support

Chrome Firefox Safari IE
background-position (edge values) Yes Yes Yes Yes
background-attachment Yes Yes Yes IE10
background-repeat (new values) Yes No No* Yes
background-repeat (two values) Yes Yes Yes Yes
Multiple background images Yes Yes Yes Yes
background-size Yes Yes Yes Yes
Updated background shorthand Yes Yes Yes Yes
background-clip Yes Yes Yes Yes
background-origin Yes Yes Yes Yes
  • * The values are recognised but don’t display correctly.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.

Unless otherwise stated, all content on this website is © Peter Gasston and/or No Starch Press.