- [Instructor] Hi, this is Chris Converse,
and in this episode, we'll create a polka dot pattern
for the background of our web page
using gradients and background properties in CSS.
So if you'd like to follow along,
download the exercise files, and let's begin
by opening the HTML file in a text editor.
And once you have the HTML file open,
you'll see we have a pretty simple layout in place here.
Inside of the body area, we have an article element.
Inside of the article element is an image, an h1,
and a paragraph.
If you look at this in a browser,
you'll see a dark blue background in the body
as well as a dark blue background in the article area.
And now to create our polka dot pattern in the background,
let's go back to the exercise files.
Let's find style.css and open this in our text editor.
Once you have this open, let's find the rule
that targets the body element.
And then down here, after background color,
let's come in here and add another property
for background image.
So we'll type background dash image,
and for the value, we'll add a radial gradient.
So we'll type radial dash gradient,
beginning and ending parenthesis, then a semicolon.
So I'll come in here and put radial gradient
on its own line, and then a semicolon on its own line
after that, because we're going to put
two radial gradients in here.
And so for the first radial gradient
inside of the parentheses, we're going to add
a light blue color.
So a pound sign, five seven for red,
six one for green, and seven f for blue.
Then a space.
Then we'll set our first radial stop at 20%.
Then a comma and a space.
The second color's going to be transparent.
So we'll type transparent, then a space,
and we'll set the second radial stop to zero.
So with this in place, if we hit save
and go back to the browser,
we'll see our first dot showing up in the background.
So now back in our CSS, let's come in here and
copy this entire property.
Let's hit a comma, and then paste it again on the next line,
and we'll leave all of the settings the same.
Now if you were to save your CSS and go back to the browser,
we're actually looking at two dots now in the background,
but they're exactly on top of each other.
So now let's come back to our CSS
and let's add a background size property.
So we'll type background dash size,
and just to make this large enough
so we can see what's going on,
we're going to set this to 60 pixels on the width
and 60 pixels on the height.
Save your CSS, and you'll see that the background repeat,
which is on by default, is now showing,
so we can see all of the dots.
Now, again, all of these dots are on top of each other
from the two radial gradients.
So the next thing we're going to do is
set a background position property.
So on the next line, we'll type background dash position.
We're going to set this to zero for the x and zero for the y,
and then a comma, and then we're going to set an offset.
And we want the offset to be half of the size
of the background size.
So since the background size is 60 pixels,
we're going to set the offset to 30 pixels,
then a space, then 30 pixels again.
Add in your semicolon, hit save,
and now we'll see both sets of radial gradients
that are being set with the background image.
And now the last thing I want to do to make these smaller
is first come into the radial gradient,
change 20% to 12%, we'll do this for both.
Then we'll come down to background size.
We're going to change this from 60 down to 20,
and then for the background position offset
we're going to set this to half of the background size.
So we'll set these each to 10 pixels.
And with that in place, we'll hit Save,
go back to the browser, and hit Reload.
And now with nothing more than CSS, we have a
tiling polka dot pattern in the background of our web page.
And so with that, I'll conclude this episode,
and as always, thanks for watching.