Having a patterned background can add some fun and texture to your webpage. Using CSS instead of an image to create a background can speed up the load time of your page. In under five minutes, create a polka-dot pattern for the background of your webpage using gradients and background properties. It’s spot on.
- [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.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.