1
00:00:01.00 --> 00:00:03.01
- [Chris] Hi, this is Chris
Converse, and in this episode,

2
00:00:03.01 --> 00:00:06.05
we'll be exploring some
background properties in CSS.

3
00:00:06.05 --> 00:00:08.09
Now there are quite a few
CSS properties that we can

4
00:00:08.09 --> 00:00:11.08
assign to the background
of an HTML element.

5
00:00:11.08 --> 00:00:13.09
In addition to solid colors and gradients,

6
00:00:13.09 --> 00:00:17.00
we can also add images, and
even control how those images

7
00:00:17.00 --> 00:00:18.09
fill the available space.

8
00:00:18.09 --> 00:00:21.02
By using repeat properties
or scaling options,

9
00:00:21.02 --> 00:00:23.07
we can proportionally resize an image

10
00:00:23.07 --> 00:00:25.09
to either fit within the available space

11
00:00:25.09 --> 00:00:29.03
or scale the image large enough
to fill the entire element.

12
00:00:29.03 --> 00:00:32.02
Even if some of the image
gets cropped as a result.

13
00:00:32.02 --> 00:00:34.01
These properties will
provide you with a wide range

14
00:00:34.01 --> 00:00:36.05
of design options for your webpage.

15
00:00:36.05 --> 00:00:37.08
Now if you'd like to follow along,

16
00:00:37.08 --> 00:00:39.04
download the exercise files,

17
00:00:39.04 --> 00:00:42.01
and I'll start by opening
the index.html file

18
00:00:42.01 --> 00:00:44.07
in a text editor.

19
00:00:44.07 --> 00:00:47.03
Now to preview this, you
can open the index.html file

20
00:00:47.03 --> 00:00:48.09
up in a browser.

21
00:00:48.09 --> 00:00:51.02
My particular text editor
has a built-in preview,

22
00:00:51.02 --> 00:00:54.02
so I'll use that, and all
we have here is a simple

23
00:00:54.02 --> 00:00:58.08
div element defined over
here, with an ID of container

24
00:00:58.08 --> 00:01:02.04
and then just a simple paragraph
element inside of here.

25
00:01:02.04 --> 00:01:05.02
And now to begin styling the
background element of the div,

26
00:01:05.02 --> 00:01:08.03
with an ID of container, let's
go back to the exercise files

27
00:01:08.03 --> 00:01:11.06
and let's open up style.css.

28
00:01:11.06 --> 00:01:14.00
And so with the CSS file
opened, let's come down here

29
00:01:14.00 --> 00:01:17.00
and let's find the rule
that targets the pound sign,

30
00:01:17.00 --> 00:01:19.01
which is an ID, container.

31
00:01:19.01 --> 00:01:21.05
Again, that's this outer box
here, that's got a slight

32
00:01:21.05 --> 00:01:25.00
gray border defined right here.

33
00:01:25.00 --> 00:01:26.08
Let's come in here and add a few returns,

34
00:01:26.08 --> 00:01:28.05
and let's first start by simply changing

35
00:01:28.05 --> 00:01:30.01
the background color.

36
00:01:30.01 --> 00:01:35.00
So we'll type background-color,
we'll use hexadecimal

37
00:01:35.00 --> 00:01:41.03
and let's specify 0D for red,
8B for green and CD for blue.

38
00:01:41.03 --> 00:01:43.05
Now over here in the preview,
we can see that the entire

39
00:01:43.05 --> 00:01:46.08
background area of that
div with an ID of container

40
00:01:46.08 --> 00:01:49.05
is now showing up in that color blue.

41
00:01:49.05 --> 00:01:51.00
It's also worth noting that that blue

42
00:01:51.00 --> 00:01:53.04
is behind the paragraph element as well.

43
00:01:53.04 --> 00:01:56.08
It is all the way in the
background of that div element.

44
00:01:56.08 --> 00:01:59.00
Now with a solid color
defined, let's take a look at

45
00:01:59.00 --> 00:02:00.07
creating a gradient.

46
00:02:00.07 --> 00:02:03.06
So back in the CSS, let's
come in here and change

47
00:02:03.06 --> 00:02:07.03
background-color to
just simply background.

48
00:02:07.03 --> 00:02:10.01
Next, let's get rid of the
color and what we're going to do

49
00:02:10.01 --> 00:02:16.01
is we're going to type linear-gradient,

50
00:02:16.01 --> 00:02:18.03
then we'll put a beginning
and ending parenthesis,

51
00:02:18.03 --> 00:02:21.02
keep the semicolon that
we had from before.

52
00:02:21.02 --> 00:02:22.07
And now, inside of the
parentheses, we'll specify

53
00:02:22.07 --> 00:02:23.07
two colors.

54
00:02:23.07 --> 00:02:26.09
First we'll pick a green
color and then a blue color.

55
00:02:26.09 --> 00:02:30.00
So for the first green
color, type pound sign.

56
00:02:30.00 --> 00:02:32.09
We'll set red to 68,

57
00:02:32.09 --> 00:02:35.00
we'll set green to C8

58
00:02:35.00 --> 00:02:38.01
and we'll set blue to 7A.

59
00:02:38.01 --> 00:02:41.00
Then we'll hit a comma and
specify the blue color.

60
00:02:41.00 --> 00:02:48.08
So pound sign, 0D for red,
8B for green and CD for blue.

61
00:02:48.08 --> 00:02:50.03
And now over here in the
preview, we can see we now

62
00:02:50.03 --> 00:02:52.00
have a gradient.

63
00:02:52.00 --> 00:02:55.03
By default the gradient
starts at the 0,0 corner,

64
00:02:55.03 --> 00:02:57.07
which is the top left area
here, and it goes all the way

65
00:02:57.07 --> 00:03:01.04
down to the full height of the y-axis.

66
00:03:01.04 --> 00:03:04.05
Now we can change the direction
of a gradient as well.

67
00:03:04.05 --> 00:03:06.05
So let's come in here,
inside of the parentheses

68
00:03:06.05 --> 00:03:08.06
for linear gradient.

69
00:03:08.06 --> 00:03:11.06
Let's hit a comma, at the
beginning before the first color

70
00:03:11.06 --> 00:03:13.09
and then before the comma, we'll type

71
00:03:13.09 --> 00:03:20.01
to space bottom space right.

72
00:03:20.01 --> 00:03:22.04
And now what we'll see in the
preview is the color starts

73
00:03:22.04 --> 00:03:25.00
from the upper left-hand
corner and goes all the way

74
00:03:25.00 --> 00:03:26.06
to the bottom right corner.

75
00:03:26.06 --> 00:03:28.08
So let's take a look at a couple
more properties we can set

76
00:03:28.08 --> 00:03:30.03
for our gradient.

77
00:03:30.03 --> 00:03:32.06
So first, after the second color blue,

78
00:03:32.06 --> 00:03:36.07
let's hit a space, we'll type
in 10%, and what we'll see

79
00:03:36.07 --> 00:03:40.01
in the preview is that the
blue starts at 10% of the way

80
00:03:40.01 --> 00:03:43.08
from the top left to bottom right.

81
00:03:43.08 --> 00:03:46.00
And now before linear-gradient,
let's come in here

82
00:03:46.00 --> 00:03:51.03
and type in the word
repeating and then add a dash

83
00:03:51.03 --> 00:03:52.09
and this will actually repeat the gradient

84
00:03:52.09 --> 00:03:56.04
all the way across the entire element.

85
00:03:56.04 --> 00:03:58.06
Then finally we'll come
in here and replace

86
00:03:58.06 --> 00:04:03.00
repeating-linear with radial.

87
00:04:03.00 --> 00:04:07.09
Let's come in and remove the
to bottom right and the comma

88
00:04:07.09 --> 00:04:11.02
and then let's come in here
and change the 10% to 70%.

89
00:04:11.02 --> 00:04:12.07
So now on the preview
we can see we now have

90
00:04:12.07 --> 00:04:16.01
a radial gradient between our two colors.

91
00:04:16.01 --> 00:04:19.00
Now as you can imagine,
defining CSS gradients can get

92
00:04:19.00 --> 00:04:21.01
rather complex, rather quickly.

93
00:04:21.01 --> 00:04:22.09
Now there are many online
tools that you can find

94
00:04:22.09 --> 00:04:25.04
that will help you to
define your CSS gradients

95
00:04:25.04 --> 00:04:28.01
with a visual editor,
right in the browser,

96
00:04:28.01 --> 00:04:29.05
and then you can simply copy and paste out

97
00:04:29.05 --> 00:04:31.06
your CSS properties.

98
00:04:31.06 --> 00:04:33.03
And these are two of
the most popular editors

99
00:04:33.03 --> 00:04:35.02
at the time of this recording.

100
00:04:35.02 --> 00:04:37.02
And so now that we have
explored colors and gradients,

101
00:04:37.02 --> 00:04:39.03
let's come in here and start experimenting

102
00:04:39.03 --> 00:04:41.06
with background images.

103
00:04:41.06 --> 00:04:44.04
So let's delete that background property.

104
00:04:44.04 --> 00:04:45.05
So the first property
we'll start with is a

105
00:04:45.05 --> 00:04:47.02
background-repeat.

106
00:04:47.02 --> 00:04:49.01
This will control how the image displays

107
00:04:49.01 --> 00:04:51.05
inside of the element.

108
00:04:51.05 --> 00:04:53.03
And so to begin, we're just
going to simply set this

109
00:04:53.03 --> 00:04:56.04
to a no-repeat.

110
00:04:56.04 --> 00:04:59.09
Next line we're going
to set background-image,

111
00:04:59.09 --> 00:05:02.03
then we'll type in url,
put in our parentheses

112
00:05:02.03 --> 00:05:04.00
and a semicolon.

113
00:05:04.00 --> 00:05:06.06
Inside of the parentheses
we can point to an image.

114
00:05:06.06 --> 00:05:08.03
So I'll point to one
of the graphics we have

115
00:05:08.03 --> 00:05:10.06
inside of the media folder,

116
00:05:10.06 --> 00:05:16.02
so we'll type media/clovers.jpg.

117
00:05:16.02 --> 00:05:18.02
Now as soon as I do that,
we'll see that the graphic

118
00:05:18.02 --> 00:05:20.01
now shows up in that background element.

119
00:05:20.01 --> 00:05:23.01
It aligns to the upper left-hand
corner and since in this

120
00:05:23.01 --> 00:05:26.07
particular view, based on
the width of the browser,

121
00:05:26.07 --> 00:05:29.00
the image is not as wide
as the background element,

122
00:05:29.00 --> 00:05:33.00
so we'll see that negative space here.

123
00:05:33.00 --> 00:05:34.03
Next property we're
going to set, this can be

124
00:05:34.03 --> 00:05:36.09
background-position.

125
00:05:36.09 --> 00:05:38.07
So the first property after
position is going to be

126
00:05:38.07 --> 00:05:40.06
the X property.

127
00:05:40.06 --> 00:05:43.00
So let's set this to 50%.

128
00:05:43.00 --> 00:05:45.09
Then a space, and for the Y
value we're going to set 50%

129
00:05:45.09 --> 00:05:48.09
as well, so that will put
the image right in the middle

130
00:05:48.09 --> 00:05:50.08
of that HTML element.

131
00:05:50.08 --> 00:05:52.04
So again, if I come over
here and resize the browser,

132
00:05:52.04 --> 00:05:55.06
we'll see that that will
position, both on the horizontal

133
00:05:55.06 --> 00:06:00.04
and vertical axis, inside that area.

134
00:06:00.04 --> 00:06:01.03
Let's add another property.

135
00:06:01.03 --> 00:06:04.03
Let's add background-size.

136
00:06:04.03 --> 00:06:07.01
This allows us to scale
the size of this image.

137
00:06:07.01 --> 00:06:09.03
Now we will set this to tile,
but I want the individual

138
00:06:09.03 --> 00:06:11.05
tiles to be a lot smaller.

139
00:06:11.05 --> 00:06:13.05
Now the original image of the clovers,

140
00:06:13.05 --> 00:06:19.05
is 500 pixels by 246, so I want
to use a much smaller value.

141
00:06:19.05 --> 00:06:21.03
So the first value is the X size.

142
00:06:21.03 --> 00:06:25.04
We'll set this to 350 pixels
and then we'll set the Y size

143
00:06:25.04 --> 00:06:28.04
to 172 pixels.

144
00:06:28.04 --> 00:06:31.00
So again, that makes that much smaller.

145
00:06:31.00 --> 00:06:33.06
And now to see this tile the
entire area, let's come up

146
00:06:33.06 --> 00:06:37.08
and change background-repeat to repeat,

147
00:06:37.08 --> 00:06:40.03
and so now we have this
seamlessly tiling background,

148
00:06:40.03 --> 00:06:42.07
filling the entire area.

149
00:06:42.07 --> 00:06:43.06
So at this point let's come in here

150
00:06:43.06 --> 00:06:48.00
and let's change the
clovers file to louvre.

151
00:06:48.00 --> 00:06:51.01
So louvre.jpg.

152
00:06:51.01 --> 00:06:53.03
Let's come back up to the repeat
and let's set this back to

153
00:06:53.03 --> 00:06:55.03
no-repeat.

154
00:06:55.03 --> 00:06:57.09
Next, let's change the
background-position.

155
00:06:57.09 --> 00:07:01.01
We'll keep 50% on the X, so it centers,

156
00:07:01.01 --> 00:07:05.07
but for the Y position,
let's set this to bottom.

157
00:07:05.07 --> 00:07:07.09
And this will set the
bottom of the jpeg file

158
00:07:07.09 --> 00:07:11.03
to align to the bottom
of the HTML element.

159
00:07:11.03 --> 00:07:12.07
And then for background-size,
let's take a look

160
00:07:12.07 --> 00:07:14.09
at two different properties.

161
00:07:14.09 --> 00:07:17.05
Now if we set these
values to a percentage,

162
00:07:17.05 --> 00:07:20.09
the sizing wouldn't be based
on the percent of the graphic,

163
00:07:20.09 --> 00:07:23.01
but the percentage value
would be calculated based on

164
00:07:23.01 --> 00:07:25.08
the size of the HTML element.

165
00:07:25.08 --> 00:07:27.06
But what we going to do
here is set some dynamic

166
00:07:27.06 --> 00:07:29.02
proportional scaling.

167
00:07:29.02 --> 00:07:31.07
So first we're going to use contain.

168
00:07:31.07 --> 00:07:34.01
So for background-size
we'll choose contain,

169
00:07:34.01 --> 00:07:36.06
and what this will do is
scale the background image

170
00:07:36.06 --> 00:07:39.02
until either the height of the image

171
00:07:39.02 --> 00:07:41.02
matches the height of the element

172
00:07:41.02 --> 00:07:42.06
or the width of the image

173
00:07:42.06 --> 00:07:44.03
matches the width of the element.

174
00:07:44.03 --> 00:07:45.09
But in either case, the image will scale

175
00:07:45.09 --> 00:07:48.08
as large as possible without being cropped

176
00:07:48.08 --> 00:07:51.00
and leave additional
space, either horizontally

177
00:07:51.00 --> 00:07:53.07
or vertically, depending on
how much room is available

178
00:07:53.07 --> 00:07:56.00
in the element.

179
00:07:56.00 --> 00:07:57.07
And then finally, let's come
in here and change contain

180
00:07:57.07 --> 00:08:00.05
to cover.

181
00:08:00.05 --> 00:08:02.06
So what cover is going
to do is scale the image,

182
00:08:02.06 --> 00:08:05.08
horizontally or vertically,
so that the image will fill

183
00:08:05.08 --> 00:08:09.00
the entire HTML element,
and this can result

184
00:08:09.00 --> 00:08:11.03
in your image being cropped, as its scaled

185
00:08:11.03 --> 00:08:13.07
to fill the entire element.

186
00:08:13.07 --> 00:08:15.09
So at this point, I have the
image placed in the background

187
00:08:15.09 --> 00:08:17.04
the way I like it.

188
00:08:17.04 --> 00:08:20.09
One final detail, let's come
down to the container space p,

189
00:08:20.09 --> 00:08:22.05
we're going to target
the paragraph element,

190
00:08:22.05 --> 00:08:24.08
which is the caption here.

191
00:08:24.08 --> 00:08:26.02
And let's change some styles here.

192
00:08:26.02 --> 00:08:28.01
Let's make the color white and let's set

193
00:08:28.01 --> 00:08:30.06
the background-color of
the paragraph element

194
00:08:30.06 --> 00:08:33.05
to a semi-transparent black.

195
00:08:33.05 --> 00:08:37.01
So to set the type
color, we'll type color,

196
00:08:37.01 --> 00:08:40.04
pound sign and three F's to make it white.

197
00:08:40.04 --> 00:08:43.00
Then I want to come in here
and set background-color.

198
00:08:43.00 --> 00:08:46.08
We use the RGBA colorspace
and then inside here,

199
00:08:46.08 --> 00:08:50.07
we'll set zero for red, zero
for green, zero for blue,

200
00:08:50.07 --> 00:08:54.00
and then .6 for the alpha setting.

201
00:08:54.00 --> 00:08:55.08
Now one other thing you
might be interested in

202
00:08:55.08 --> 00:08:59.02
is to assign a background
image to the entire background

203
00:08:59.02 --> 00:09:00.07
of the web page.

204
00:09:00.07 --> 00:09:02.09
And so what we're going to
do is we're going to take

205
00:09:02.09 --> 00:09:05.09
our background properties,
move them off the container

206
00:09:05.09 --> 00:09:08.02
and add them to the body element.

207
00:09:08.02 --> 00:09:10.03
So to do that in our
CSS, let's come in here

208
00:09:10.03 --> 00:09:12.06
and simply select the background-repeat,

209
00:09:12.06 --> 00:09:15.08
image, position, and size.

210
00:09:15.08 --> 00:09:18.03
Let's cut these to the clipboard.

211
00:09:18.03 --> 00:09:20.05
Let's come in here and
temporarily set the display type

212
00:09:20.05 --> 00:09:25.00
of the container to none.

213
00:09:25.00 --> 00:09:28.01
Let's come up to body, let's hit a return.

214
00:09:28.01 --> 00:09:32.06
Let's paste all those properties in here.

215
00:09:32.06 --> 00:09:34.03
At the top of the body element,
I'm going to come in here

216
00:09:34.03 --> 00:09:36.09
and set a margin of zero.

217
00:09:36.09 --> 00:09:38.06
And now because the body element behaves

218
00:09:38.06 --> 00:09:40.09
a little differently than other elements.

219
00:09:40.09 --> 00:09:43.05
Because the body element
and the head element

220
00:09:43.05 --> 00:09:46.09
exist inside of the HTML
element for the entire document,

221
00:09:46.09 --> 00:09:51.02
we will need to set the height
of the HTML element itself.

222
00:09:51.02 --> 00:09:53.00
So let's come in here
and add a rule to target

223
00:09:53.00 --> 00:09:57.00
the HTML element of the entire document,

224
00:09:57.00 --> 00:10:01.02
and let's set a height here to 100%.

225
00:10:01.02 --> 00:10:03.07
The HTML element will not
reach a hundred percent

226
00:10:03.07 --> 00:10:05.05
of the height of the browser window

227
00:10:05.05 --> 00:10:08.00
unless we have enough content.

228
00:10:08.00 --> 00:10:10.04
Now with those few changes,
we have a background graphic

229
00:10:10.04 --> 00:10:13.03
that will now fill the
entire viewport area

230
00:10:13.03 --> 00:10:15.03
inside the browser.

231
00:10:15.03 --> 00:10:17.03
And with that we've
explored quite a few options

232
00:10:17.03 --> 00:10:19.05
for working with backgrounds.

233
00:10:19.05 --> 00:10:20.05
Now if you'd like to learn to create

234
00:10:20.05 --> 00:10:22.08
your own seamlessly tiling graphics,

235
00:10:22.08 --> 00:10:24.01
check out our course entitled

236
00:10:24.01 --> 00:10:26.06
Creating a Repeating
Background in Photoshop,

237
00:10:26.06 --> 00:10:28.09
and if you'd like to build on
these background techniques

238
00:10:28.09 --> 00:10:31.05
to create responsive
images for your web page,

239
00:10:31.05 --> 00:10:33.06
check out chapter two of our course on

240
00:10:33.06 --> 00:10:35.06
Creating a Responsive Web Design.

241
00:10:35.06 --> 00:10:38.04
Both are available here in the library.

242
00:10:38.04 --> 00:10:40.02
And now that concludes our brief look at

243
00:10:40.02 --> 00:10:42.04
Working with Background Properties in CSS.

244
00:10:42.04 --> 00:10:45.02
And, as always, thanks for watching.