Backgrounds

Figures

1. Backgrounds and padding
2. A reverse-text effect for H1 elements
3. The results of a more complicated stylesheet
4. Using background and border to two-tone an image
5. The three box-oriented types of background clipping
6. Clipping the background to text
7. Applying a background image in CSS
8. Adding link icons as background images
9. What inherited backgrounds would do to layout
10. Centering a single background image
11. Various percentage positions
12. Offsetting the background image using length measures
13. Using negative length values to position the origin image
14. Varying effects of negative percentage values
15. Changing the offset edges for the origin image
16. Inferred zero-length offsets
17. The three types of background origins
18. The three types of background origins, redux
19. When origin and clipping diverge
20. Tiling the background image vertically
21. Tiling the background image horizontally
22. Placing a single large background image
23. Bordering elements with background images
24. Centering the origin image and repeating it
25. Tiling the background image with filler space
26. Spaced-out tiling with different intervals
27. Spacing along one axis but not the other
28. Tiling the background image with scaling
29. Rounded background images that are clipped
30. Clipping due to mismatched clip and origin values
31. The centering continues to hold
32. Default-attach versus local-attach
33. Perfect alignment of backgrounds
34. The complexspiral distorted
35. Resizing the origin image
36. Distorting the origin image by resizing it
37. Resizing the origin image with percentages
38. Covering the background with the origin image
39. Containing the origin image within the background
40. Repeating a contained origin image
41. Covering, containing, positioning, and clipping
42. Using shorthand
43. Multiple background images
44. Individually positioning background images
45. Multiple background layers via shorthand
46. Obscuring layers with repeated images
47. Placing the same image in all four corners
48. A simple box shadow
49. Box shadows are incomplete
50. Various blurred and spread shadows
51. Various inset shadows