A detailed look at CSS3 backgrounds including the three key boxes - content-box, padding-box,border-box. The presentation also explores new values - such as space, round, contain and cover. Also covered are three new properties - background-origin, background-clip and background-size. Finally, the presentation explores shorthand CSS3 backgrounds and multiple background images. Not for the faint-hearted!

1. CSS3
BACKGROUND

2. CSS2.1 has five background
properties that we can use to
control the background of
elements.

3. The five background-properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

4. CSS3 gives us three new
background-properties, as well
as a range of new background
property values.

5. All of these are designed to give
us more control over
background images.

6. However, we need to understand
three important boxes, before
we look at these new CSS3
properties and values.

7. The three
boxes

8. First let’s start with a simple
container with some content
inside. Although we cannot see it,
there is an invisible box around
the content called the
content-box.

9. content-box
The quick brown
fox jumped over
the lazy web
developer.

10. If we add some padding to all
sides of the container, we will
have a new box called a
padding-box.

11. padding-box
The quick brown
fox jumped over
the lazy web
developer.

12. If we add a border to all sides
of the container, we will have
our third box - called a
border-box.

13. border-box
The quick brown
fox jumped over
the lazy web
developer.

14. These three boxes are used
to define where background
images are placed, how they
are sized and where they
can be cropped.

15. More on these boxes later…
But for now, let’s look at
background-position and
background-repeat.

16. background-
position

17. By default, background images
are placed in the top left corner
of the padding-box.

18. Image placed in top left of padding-box

19. We can change this default
position using the background-
position property.
p { background-position: 10px 10px; }

20. In CSS2.1, we can use
two values to determine the
position of the background image
in relation to the element.
1 2
p { background-position: 10px 10px; }

21. The first value represents
the horizontal position.
Horizontal axis
p { background-position: 10% 10%; }

22. The second value represents
the vertical axis.
Vertical axis
p { background-position: 10% 10%; }

23. In CSS3, we can specify up to
four values for background-
position.
1 2 3 4
p { background-position:
left 10px top 15px; }

24. The first two values represent
the horizontal axis.
Horizontal axis
p { background-position:
left 10px top 15px; }

25. The second two values
represent the vertical axis.
Vertical axis
p { background-position:
left 10px top 15px; }

26. This is a powerful addition,
as it means we can position
images using length values in
relation to any of the four
corners of elements, not just
the top left corner.

27. Positive and
negative values

28. We can use both positive and
negative values to determine the
position of background images.
Negative values
p { background-position: -5px -9px; }

29. Positive values will move
the background image to the
right and down - inside the
background area of the
element.

30. Positive x value

31. Positive y value

32. Negative values will move the
background image to the left and
up - out of the background
area of the element.

33. Negative x value

34. Negative y value

35. background-
repeat

36. By default, images will repeat
along both the x and y axis -
starting from the top left
corner of the padding-box.

37. Even though the background
images start in the top left
corner of the padding-box,
they will repeat outwards in all
directions, including into the
border-box area.

39. In CSS2.1, we could change
the repeat behaviour using
four different keywords.
• repeat
• repeat-x
• repeat-y
• no-repeat

40. repeat

41. Repeat-x

42. Repeat-y

43. no-repeat

44. repeat repeat?

45. In CSS3, we can now define
background-repeat using two
values instead of one.
div { background-repeat:
repeat repeat; }

46. The first of these two values
represents the horizontal axis.
Horizontal axis
div { background-repeat:
repeat repeat; }

47. The second value represents the
vertical axis.
Vertical axis
div { background-repeat:
repeat repeat; }

48. If we use one value only, the
browsers will interpret this as a
double value. This allows the
background-repeat value to be
backwards compatible.
Browser doubles value
div { background-repeat:
repeat [repeat]; }

49. Using ‘space’ and
‘round’

50. CSS3 also allows us to use
two new values with the
background-repeat property:
• space
• round

51. Browser space round
Firefox 3.6, 4 No No
Safari 4, 5 No No
Chrome 10 No No
IE 6, 7, 8 No No
IE 9 No No
Opera 10, 11 Yes Yes

52. The space value sets the image
to repeat as often as will fit within
the background area and then the
images are spaced out to fill the
area. The first and last images
touch the edges of the area.
p { background-repeat: space; }

53. Images set to space along the vertical axis

54. The round value sets the image
to repeat as often as will fit within
the background area. If it doesn't
fit a whole number of times, it is
rescaled so that it does.
p { background-repeat: round; }

55. Images set to round along the vertical axis

56. Be aware that the background
images may be stretched or
distorted using this method.

57. These new values gives us
much more flexibility when
laying out background-images.

58. For example, we can now use
two values to define different
horizontal and vertical
behaviour:
div { background-repeat:
space no-repeat; }

59. Three new
properties

60. In CSS3, we can also use three
entirely new background
properties.
• background-origin
• background-clip
• background-size

61. background-
origin

62. The background-origin
property is used to determine
where background images are
positioned inside a box.
div { background-origin:
padding-box; }

63. We can position our
background images via
background-origin using
three possible values:
• content-box
• padding-box
• border-box

64. Positioned in relation to the content-box

65. Positioned in relation to the padding-box

66. Positioned in relation to the border-box

67. Browser background-origin
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

68. background-
clip

69. The background-clip
property is used to determine
where and if background images
are clipped (or cut off) inside the
background area.
div { background-clip: padding-box; }

70. Browser background-clip
Firefox 3.6 (See notes next slide)
Firefox 4 Yes
Safari 4, 5 -webkit-background-clip
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

71. Firefox versions 1.0 to 3.6
support an older syntax:
• border (instead of border-box)
• padding (instead of padding-box)
Note: they do not support content or the
newer content-box values.
Thanks to Louis Lazaris - impressivewebs.com for picking up this FireFox support issue

72. We can clip our background
images via the background-
clip property using three
possible values:
• content-box
• padding-box
• border-box

73. Background-image clipped inside content-box

74. Background-image clipped inside padding-box

75. Background-image clipped inside border-box

76. background-
size

77. In CSS2.1, we could apply
background images to elements,
but we had no way to control
the size of these background
images.

78. However, CSS3 allows us to set
the size of our background
images using the background-
size property.
div { background-size: 10px 20px; }

79. We can set the size using length
values, percentage values or one
of two new keywords:
• contain
• cover

80. Browser background-size
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

81. Length values

82. The length value sets the height
and width of the background
image. The first value sets the
width, the second value sets
the height.
Width Height
div { background-size: 10px 20px; }

83. If only one length value
is given, the second value is
set to the ‘initial value’ of auto.
Initial value of auto used
div { background-size: 10px [auto]; }

84. Percentage values

85. The percentage value sets the
height and width to a percent
of the parent element. The first
value sets the width, the second
value sets the height.
Width Height
div { background-size: 20% 40%; }

86. Like length values, if only one
percentage value is given,
the second is set to the ‘initial
value’ of auto.
Initial value
div { background-size: 10% [auto]; }

87. The ‘contain’ value

88. The contain value will scale the
image (while keeping its aspect
ratio) so that the entire image can
fit inside the background area.
div { background-size: contain; }

89. Large background image scaled down to fit using contain

90. The ‘cover’ value

91. The cover value will scale the
image (while keeping it’s aspect
ratio) to the smallest size that
will completely covered the
background area.
div { background-size: cover; }

92. Small background image scaled up to fit using cover

93. Now, it’s time to talk about
the most exciting part of
CSS3 backgrounds.

94. Multiple
backgrounds

95. With CSS2.1, we could only add
one background image to any
HTML element.

96. However, CSS3 allows us to
add multiple background
images to any element!

97. Browser Multiple backgrounds
Firefox 3.6, 4 Yes
Safari 4, 5 Yes
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes

98. Longhand

99. CSS3 allows us to place multiple,
comma-separated values into
any background property.
p { Comma after each value
background-image:
url(01.gif),
url(02.gif),
url(03.gif);
}

100. An example of three background
images inside one element -
written in longhand
background-image 1
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}

101. An example of three background
images inside one element -
written in longhand
background-image 2
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}

102. An example of three background
images inside one element -
written in longhand
background-image 3
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}

103. Each of the images is sized,
positioned, and tiled according
to the corresponding value in
the other background
properties.

104. If a property doesn't have enough
comma-separated values to
match the number of layers, the
browser must calculate its used
value by repeating the list of
values until there are enough.

105. Listed values repeated when not
defined by author.
p
{
background-image: url(1.gif), url(2.gif), url(3.gif), url(4.gif) ;
background-size: auto, 10% auto, auto, auto ;
background-repeat: no-repeat, repeat, [no-repeat], [repeat] ;
}

106. Layer upon layer

107. The background images are then
displayed in layers - one on top of
each other. The first image in
the list is the layer closest to
the user, the next one is painted
behind the first, and so on.

108. Layer 3

109. Layer 2

110. Layer 1

111. Background-color

112. Only one background-color
can be defined for any element!
This background-color sits
below the background image on
this final layer.

113. An example of three background
images inside one element -
written in longhand
Background-color
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
Background-color: yellow

114. If more that one background-
color value is assigned, all
background-colors will be
ignored.

115. Shorthand
properties

116. Some CSS properties can be
combined into shorthand
properties. This saves us having
to write multiple declarations.

117. The background property allows
us to set all of the individual
background properties using
one rule.

118. CSS2.1 background syntax:
p { background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
;}

119. The CSS3 background syntax
p { background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
Three new
[background-clip] CSS3 properties
[background-color]
;}

120. Understanding
initial values

121. If you are going to use
shorthand properties, you need
to understand initial values,
as these values can affect which
rules will be applied and those
that may not!

122. If we use a shorthand
background property, we
don’t need to define all the
background properties in order
for the rule to work. For example:
Only one background-property defined
p { background: yellow; }

123. However, browsers will add
initial values for any value that
we don’t define.
Initial values added by browser
p { background: [none] [0% 0%] / [auto auto]
[repeat repeat] [scroll] [padding-box]
[border-box] yellow; }

124. The initial values are:
background-color transparent
background-image none
background-repeat repeat
background-attachment scroll
background-position 0% 0%
background-origin padding-box
background-clip border-box
background-size auto

125. Why does all this matter?
You may try to specify two
background rules for the same
element and then wonder why
one of the rules doesn’t work.
Same element
p { background: url(a.gif); }
P { background: yellow; }

126. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
The first rule has a background-image specified.
All other initial values are added by the browser
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}

127. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
As the second rule has no background-image defined,
the browser has set the value to an initial value of none
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}

128. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
The second rule wins, as it is written last.
So, no background image is applied
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}

129. How to write
shorthand
backgrounds

130. All eight background properties
can be combined into a single
shorthand background
property.

131. Multiple shorthand backgrounds
are written in the same way as
single shorthand backgrounds -
with comma’s separating each
background value.

132. A simple example of three
background images inside one
element - written in shorthand.
p background-image 1
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}

133. A simple example of three
background images inside one
element - written in shorthand.
p
background-image 2
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}

134. A simple example of three
background images inside one
element - written in shorthand.
p
{
background: background-image 3
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}

135. Just as with the longhand
version, each of the background
images is displayed as a layer -
one on top of each other.

136. Layer 3

137. Layer 2

138. Layer 1

139. Background-color
and multiple
backgrounds

140. Only the lowest layer, called
the ‘final layer’, can be given
a background-color.

141. The background-color
sits below the background image
on this final layer only.

142. If a background-color value is
assigned to any other layer apart
from the final layer, the entire
rule will not be displayed.

143. A background-color assigned
to the final layer only.
p Final layer with background-color assigned
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px yellow;
}

144. It may be safer to add the
background-color as a
separate declaration using the
background-color
property.

145. A background-color
declared separately.
p background-color
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
background-color: yellow;
}

146. Some catches with
complex shorthands

147. If you are writing more complex
shorthand rules, you have to
be aware of some browser
quirks and catches.

148. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image] background-image
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];

149. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position] Background-position
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];

150. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size] Background-size
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];

151. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat] Background-repeat
[background-attachment]
[background-origin]
[background-clip]
[background-color];

152. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment] Background-attachment
[background-origin]
[background-clip]
[background-color];

153. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin] Background-origin
[background-clip]
[background-color];

154. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip] Background-clip
[background-color];

155. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color]; Background-color

156. You may have noticed that there
is a forward slash between
background-position and
background-size.

157. A forward slash separating
position and size.
p
{
background:
[background-image]
[background-position] Slash
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];

158. Safari 5, firefox 4, and Chrome 10
all have two problems with rules
written out in full like this.

159. Problem 1:
These browsers ignore the entire
declaration when a forward slash
or background-size values are
included.

160. Problem 2:
These browsers ignore the entire
declaration when two box values
(background-clip and
background-origin) are
included. Only one value can be
included.

161. So, at this time, shorthand
rules are fine for less complex
declarations, but if you want to
include all seven properties, it
may be better to use longhand
for the present.

162. Multiple
backgrounds and
gradients

163. Keep in mind that gradients are a
type of generated image. They
can be used in place of the
url() value.

164. This means you can include
gradients within multiple
backgrounds.
Linear gradient
p
{
background:
url(demo.jpg) no-repeat 0 0,
linear-gradient(left, blue, green);
}

165. Vendor-specific
extensions and
multiple
backgrounds.

166. What happens when you want to
add vendor-specific properties
into multiple backgrounds?

167. Browsers will ignore CSS they
don’t understand. In fact, they will
ignore the entire declaration.

168. Vendor-specific properties are
only understood by individual
browsers - that’s their purpose.

169. The downside of this is that
we cannot add multiple vendor-
specific properties into one
declaration as all browsers would
then ignore the entire
declaration.

170. This means we have to rewrite
the background property for each
vendor-specific property. Any
other background images have
to be included in each
declaration.

171. For example:
p
{
background:
url(demo.jpg) no-repeat 0 0,
-moz-linear-gradient(left, blue, green);
background:
url(demo.jpg) no-repeat 0 0,
-o-linear-gradient(left, blue, green);
background:
url(demo.jpg) no-repeat 0 0,
-webkit-gradient(linear, left top, right top,
from(blue), to(green));
}

172. Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley