CSS3 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"); 

• 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; 

/* 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; 

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

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


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

• 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%;