CSS3 Backgrounds


Exploring new background options within CSS3


Amanda Giles
Mar 5, 2014

Multiple Backgrounds


  • Use a comma separated list
  • Each image is treated as a layer
  • First item in list is in front (on top)
  • Subsequent images are behind (or below)

background-image: url("cat.png"), url("rays.jpg"); 

Background Properties on Multiple Backgrounds


  • Use a comma separated list for these as well
  • Extra values will be ignored
  • If fewer values are found, they will be repeated

background-repeat: no-repeat, repeat-x;background-position: center 300px, center top; 

'No-repeat' would be used for both images
background-repeat: no-repeat; 

Background-Clip


Determines where the background is painted or displayed

/* Background painted within and under border */background-clip: border-box; 
/* Background painted within padding (not under border) */background-clip: padding-box;
/* Background painted within content (not padding or border) */background-clip: content-box; 

Background-Origin


Determines where the background position starts

/* Positoned relative to border */background-origin: border-box;

/* Positioned relative to padding */background-origin: padding-box;

/* Positioned relative to content */background-origin: content-box;

Background-Size


Determines size of background image

  • Give 2 values: width height
  • Can give sizing in pixels or %
  • If only 1 value is given, the other is assumed to be auto
  • Does not work well with multiple backgrounds

background-size: 300px 40%;background-size: 50%; /* converts to 50% auto */background-size: 50% 50%; 

Browser Support


Works in most major browsers except IE 8 :(

Let's Play!


CSS3 Backgrounds

By Amanda Giles

CSS3 Backgrounds

  • 2,302