7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 CSS3 Background Patterns

Repeating background patterns always used to require the creation of a little GIF or PNG, but now you can skip that step for many types of patterns. In this project, learn how to make pure CSS3 background patterns.

Related Links

2.2 CSS3 Background Patterns

Hi, welcome back to Ten CSS3 Branding and Presentation Projects. In this project, we're gonna be using CSS3 to create some subtle repeating background images. We're gonna combine repeating gradients with CSS3's background size property. To give some backgrounds that you'd be able to use in any website in place of tiling PNGs or GIFs. Now to get started, you can fork this base pen, you'll find the link for that in the related link section below this video. We're gonna create a series of little tiles, each one with a different background pattern on it and we're gonna put each one into a div. So we've just got some basic styling in here that is gonna set up each of the background styles that you create. So then we're all good to add in our first div that we're gonna add our first background pattern to. And we're using class triangles there because we are gonna make a series of little triangles that will repeat vertically and horizontally just like a background png or gif would. And the first thing we're gonna do is just target our class with a basic background color. So that just gives us a fall back, cuz not all browsers support the gradients that we're gonna be using. And you'll find some information on capability in the links below this video. Now we can add in the gradient that is gonna make up our triangles. Now we're gonna use this gradient as a background image, as that's how it's gonna behave, as an image rather than as just a flat color. And then we're gonna use repeating-linear-gradient. We need opening and closing brackets with a semicolon at the end of the line. In between these brackets, this is where we need to define the gradient. We need to define the direction that the gradient is going to run and the colors that it's going to use, as well as the stops for those colors. Now, let me show you. Now to begin with, we wanted to find the direction that the gradient is going to run with. And we're going to give it a direction of -45 degrees. And that's going to make the gradient that we set up run on a diagonal. Then after that, we'll place a comma and now we're gonna add in our first color. We actually want our first color to be transparent so that our background color that 'we've already set just shows through. Then we want that transparency to run all the way up to 50% of the way through the gradient. So put transparent 50%, that's our first lot of color. Then, from that 50% point, we want a different color. And we are going to use F0ECDB from that 50% point. And then we want that color to run all the way through to the end. F0EC DB and now you can see, we have this diagonal line, and what we want to do is cut this diagonal line off into just a square area and then have that square alone repeating itself from left to right all the way across this tile. The way we do that is by using the background size property. Now, we're gonna add that in, background size. Then we're going to set our background size to 20 pixels by 20 pixels. And there, now we have our triangles pattern. Now what it's doing is, it's sectioning this whole area off into little 20 pixel by 20 pixel squares, and then it's running our gradient all through each one of those little squares. That's our first example of the kind of background that we can create combining repeating gradients with background size. And we can also do other things like creating repeating diagonal lines and circles. Now let's start with some evenly sized lines. So kind of zebra stripes so they're gonna run diagonally across a new tile. We'll add in the HTML for the tile. This one is gonna be called diagonal_stripes even. And we'll do the same thing again. We'll start with just a background color. So that's in almost black right there. And now, we're gonna add in our repeating linear gradient. And this is very similar to the one we just used early in our first gradient. We had the first color run all the way to 50%. So that's why we've got from this corner to halfway is transparent. And then from 50% we had the second color. So we have halfway down to the bottom corner is our darker color. We've used the same type of approach except this time, the first color only runs up to 25% of the way through. The second color runs from 25% to 50%. And then we're using repeating gradients, so that means that that line is gonna get repeated over and over and over. And you'll see the effect that has when we introduce our background size. This time, we're gonna set it to 12 by 12 pixels and check it out. We've got diagonally running lines, repeating in a zipper striping pattern all the way through. And because you have CSS that you're working with here, you can just change the size of the stripes. So say you wanted larger stripes, you could change the background size from 12 to 20. And now we've got larger stripes. And you can go ahead and change the colors if you need to. It gives you a very flexible way of creating background patterns. All right, so how about if we don't want evenly sized stripes, what if we want, pinstripes? We'll add in another tile with the class diagonal_pinstripes, and just create a place for our styles to go for this class. Now we can take this exact same code and drop it in. And now to change the way that these stripes work, we can just play with the percentage values that we're using for our color stops here. We're gonna change 25% on both of these stops here, to 10%. And there we go, instant pin stripes. Now, you might be wondering can you only work with straight lines and diagonal lines with these types of patterns. You can also work with round shapes sing repeating radial gradient instead of repeating linear gradient. We just make a new div for our little circles pattern. Just like for our other patterns so far, we're gonna start with just a flat background color, and then we're gonna set up our gradient base background image. And this time we're using repeating-radial-gradient instead of linear gradient. And now because we're not working with lines anymore, we're working with radial gradients, instead of specifying a direction, we're gonna specify a shape. And in this case, we want to make a circle. This value can alternately be set as an ellipse, but we are going to use this value so we get a perfect circle with our gradient. Then, we're going to set our first lot of color to run from the beginning of the gradient up to 45% with this lighter blue. From 45% up to 60%, we're gonna have transparent color so that our background color shows through and then finally from 60% through to 100%, we're going back to that lighter blue. And you can see already that we've formed up a circle on our background. And now when we introduce our background size, we're gonna set it to 10 by 10 pixels. And now we've got the subtle little circles tiling all the way across our pattern. You can also use these types of techniques to simulate various types of textures. And in this case, we're gonna simulate a kind of rough paper texture, something that has a little bit of imprinting on it to give it some little raised areas. We'll add a new div for it, for our rough paper. Once again we'll add basic background color. And we're also going to keep using the radial gradient. Now we're using a circle again, and this time, instead of having a point in the gradient where our color shifts suddenly, so here we've got a shift suddenly from this blue to transparent. We're not having any sudden shifts, we're having a gradual shift from one color to the next. At this size, you can hardly even see that we've got a darker color in the middle, just slowly fanning out to a lighter color. But when we add in a background size of ten by ten pixels, now you can see we have this rough paper texture that's come up. Just these soft little indentations in our paper texture from that slightly darker circle just fanning out on a repeat all throughout the background. Now we're gonna make one more background pattern, and that is a crosshatching pattern. And to do this we're going to use more than one gradient in a single background. So we'll add in our extra div to hold that crosshatch pattern, and now we're going to grab our whole diagonal pinstripes class and duplicate it. We're gonna change its class name to crosshatch. And now, we're going to get the whole gradient that we already created. Copy it, add a comma after it and then paste that same gradient in a second time. And then what we're gonna do is just flip the direction of the gradient by switching it to -135 degrees. And there we go, instant cross section pattern. So not only can you make a series of really cool little single patterns, you can also combine them to create all kinds of different things. And there are a couple of provisos for working with patterns like this. You will see some variance between one browser and the next with different patterns. Some browsers will respond better with different background sizes, so it's a good idea to have all the browsers that you're gonna be targeting open, and as you're changing your settings, just try to tweak them for the best results across all those browsers. And the other consideration is processing all of these background repeats can be a little bit resource intensive, so just keep an eye on what you're putting together and how well your sites are performing. Now, these background patterns are perfect for experimentation. I encourage you to try messing around with settings that we have used in these background patterns, changing sizes, mixing things together, working with different colors, changing up the percentage values. And when you're done building these background patents or creating some new background patents of your own, we would love to see what you've come up with. So please tweet us through your pins to #10css3projects. In the next project, we're gonna be creating a personal business card. So this will be like a little tiny miniature website that you can share with other people just to let everyone know your essential contact details and your links around the web for where your work and your other online presences can be found. I'll see you in the next project.

Back to the top