1
00:00:00.04 --> 00:00:02.01
- [Instructor] Hi, this is Chris Converse,

2
00:00:02.01 --> 00:00:04.03
and in this episode, we'll
create a polka dot pattern

3
00:00:04.03 --> 00:00:05.06
for the background of our web page

4
00:00:05.06 --> 00:00:08.07
using gradients and
background properties in CSS.

5
00:00:08.07 --> 00:00:09.09
So if you'd like to follow along,

6
00:00:09.09 --> 00:00:12.08
download the exercise
files, and let's begin

7
00:00:12.08 --> 00:00:15.08
by opening the HTML file in a text editor.

8
00:00:15.08 --> 00:00:17.03
And once you have the HTML file open,

9
00:00:17.03 --> 00:00:19.02
you'll see we have a pretty
simple layout in place here.

10
00:00:19.02 --> 00:00:21.09
Inside of the body area,
we have an article element.

11
00:00:21.09 --> 00:00:24.04
Inside of the article
element is an image, an h1,

12
00:00:24.04 --> 00:00:25.09
and a paragraph.

13
00:00:25.09 --> 00:00:27.01
If you look at this in a browser,

14
00:00:27.01 --> 00:00:29.00
you'll see a dark blue
background in the body

15
00:00:29.00 --> 00:00:32.00
as well as a dark blue
background in the article area.

16
00:00:32.00 --> 00:00:34.04
And now to create our polka
dot pattern in the background,

17
00:00:34.04 --> 00:00:36.02
let's go back to the exercise files.

18
00:00:36.02 --> 00:00:39.08
Let's find style.css and
open this in our text editor.

19
00:00:39.08 --> 00:00:42.03
Once you have this open,
let's find the rule

20
00:00:42.03 --> 00:00:44.02
that targets the body element.

21
00:00:44.02 --> 00:00:46.03
And then down here,
after background color,

22
00:00:46.03 --> 00:00:48.06
let's come in here and
add another property

23
00:00:48.06 --> 00:00:49.09
for background image.

24
00:00:49.09 --> 00:00:52.02
So we'll type background dash image,

25
00:00:52.02 --> 00:00:56.00
and for the value, we'll
add a radial gradient.

26
00:00:56.00 --> 00:00:58.04
So we'll type radial dash gradient,

27
00:00:58.04 --> 00:01:01.04
beginning and ending
parenthesis, then a semicolon.

28
00:01:01.04 --> 00:01:04.07
So I'll come in here
and put radial gradient

29
00:01:04.07 --> 00:01:07.07
on its own line, and then
a semicolon on its own line

30
00:01:07.07 --> 00:01:09.08
after that, because we're going to put

31
00:01:09.08 --> 00:01:12.00
two radial gradients in here.

32
00:01:12.00 --> 00:01:13.02
And so for the first radial gradient

33
00:01:13.02 --> 00:01:14.07
inside of the parentheses,
we're going to add

34
00:01:14.07 --> 00:01:16.00
a light blue color.

35
00:01:16.00 --> 00:01:19.00
So a pound sign, five seven for red,

36
00:01:19.00 --> 00:01:22.06
six one for green, and seven f for blue.

37
00:01:22.06 --> 00:01:24.03
Then a space.

38
00:01:24.03 --> 00:01:28.03
Then we'll set our first
radial stop at 20%.

39
00:01:28.03 --> 00:01:30.02
Then a comma and a space.

40
00:01:30.02 --> 00:01:32.05
The second color's
going to be transparent.

41
00:01:32.05 --> 00:01:34.08
So we'll type transparent, then a space,

42
00:01:34.08 --> 00:01:38.03
and we'll set the second
radial stop to zero.

43
00:01:38.03 --> 00:01:40.06
So with this in place, if we hit save

44
00:01:40.06 --> 00:01:41.09
and go back to the browser,

45
00:01:41.09 --> 00:01:44.07
we'll see our first dot
showing up in the background.

46
00:01:44.07 --> 00:01:46.08
So now back in our CSS,
let's come in here and

47
00:01:46.08 --> 00:01:50.00
copy this entire property.

48
00:01:50.00 --> 00:01:53.02
Let's hit a comma, and then
paste it again on the next line,

49
00:01:53.02 --> 00:01:55.05
and we'll leave all of
the settings the same.

50
00:01:55.05 --> 00:01:58.04
Now if you were to save your
CSS and go back to the browser,

51
00:01:58.04 --> 00:02:01.01
we're actually looking at two
dots now in the background,

52
00:02:01.01 --> 00:02:02.07
but they're exactly on top of each other.

53
00:02:02.07 --> 00:02:05.03
So now let's come back to our CSS

54
00:02:05.03 --> 00:02:08.02
and let's add a background size property.

55
00:02:08.02 --> 00:02:10.07
So we'll type background dash size,

56
00:02:10.07 --> 00:02:12.06
and just to make this large enough

57
00:02:12.06 --> 00:02:14.00
so we can see what's going on,

58
00:02:14.00 --> 00:02:17.00
we're going to set this
to 60 pixels on the width

59
00:02:17.00 --> 00:02:19.05
and 60 pixels on the height.

60
00:02:19.05 --> 00:02:22.03
Save your CSS, and you'll see
that the background repeat,

61
00:02:22.03 --> 00:02:24.01
which is on by default, is now showing,

62
00:02:24.01 --> 00:02:25.08
so we can see all of the dots.

63
00:02:25.08 --> 00:02:27.09
Now, again, all of these
dots are on top of each other

64
00:02:27.09 --> 00:02:29.09
from the two radial gradients.

65
00:02:29.09 --> 00:02:31.00
So the next thing we're going to do is

66
00:02:31.00 --> 00:02:33.06
set a background position property.

67
00:02:33.06 --> 00:02:37.07
So on the next line, we'll
type background dash position.

68
00:02:37.07 --> 00:02:40.05
We're going to set this to zero
for the x and zero for the y,

69
00:02:40.05 --> 00:02:43.03
and then a comma, and then
we're going to set an offset.

70
00:02:43.03 --> 00:02:45.05
And we want the offset
to be half of the size

71
00:02:45.05 --> 00:02:47.00
of the background size.

72
00:02:47.00 --> 00:02:49.03
So since the background size is 60 pixels,

73
00:02:49.03 --> 00:02:52.01
we're going to set the
offset to 30 pixels,

74
00:02:52.01 --> 00:02:54.08
then a space, then 30 pixels again.

75
00:02:54.08 --> 00:02:57.03
Add in your semicolon, hit save,

76
00:02:57.03 --> 00:02:59.08
and now we'll see both
sets of radial gradients

77
00:02:59.08 --> 00:03:01.08
that are being set with
the background image.

78
00:03:01.08 --> 00:03:04.04
And now the last thing I want
to do to make these smaller

79
00:03:04.04 --> 00:03:06.08
is first come into the radial gradient,

80
00:03:06.08 --> 00:03:13.02
change 20% to 12%, we'll do this for both.

81
00:03:13.02 --> 00:03:15.03
Then we'll come down to background size.

82
00:03:15.03 --> 00:03:18.05
We're going to change
this from 60 down to 20,

83
00:03:18.05 --> 00:03:21.02
and then for the
background position offset

84
00:03:21.02 --> 00:03:23.09
we're going to set this to
half of the background size.

85
00:03:23.09 --> 00:03:26.08
So we'll set these each to 10 pixels.

86
00:03:26.08 --> 00:03:28.06
And with that in place, we'll hit Save,

87
00:03:28.06 --> 00:03:30.08
go back to the browser, and hit Reload.

88
00:03:30.08 --> 00:03:32.09
And now with nothing
more than CSS, we have a

89
00:03:32.09 --> 00:03:35.07
tiling polka dot pattern in
the background of our web page.

90
00:03:35.07 --> 00:03:37.07
And so with that, I'll
conclude this episode,

91
00:03:37.07 --> 00:03:40.06
and as always, thanks for watching.