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,504