0:00 We're going to create a linear gradient. As we've seen before, it's applied to the background image property. For the angle of our gradient, I'm going to go with -45 degrees. It's basically going to start from the bottom right and go to the top left.

0:14 We want our stripes to show the background color behind them. We're going to use a mix of transparent and black here in our color stops. Let's go with transparent from to, let's say, 45 percent. Then we'll go with black from 45 percent to 55 percent and, from there onwards, back to transparent from 55 percent all the way up. Let's save that.

0:36 It's sort of working, but right now, it's just one big stripe and not a repeated series of stripes. The next thing we need to do is define a background size to make this pattern repeat over and over. We'll go with 20 pixels and 20 pixels, so a square pattern. By default, it will repeat on the x- and y-axis.

0:54 We're getting closer, but, as you can see, there is this weird little dots here between each little segment. If I make the background size a bit bigger for now -- let's say 55 by 55 -- you can see this odd square corner shape here. To help you understand what's happening, I'll change this first color stop, this transparent from to 45 percent. I'll make it white.

1:15 This reveals nicely our square pattern, this 55 by 55. You can see that we start with white from the bottom right corner, which used to be transparent. It cuts across this band that goes from 45 to 55 percent.

1:30 Because we have that square shape, we actually want a little portion of our gradient at the start and also at the end to have the same color as the stripe. Because our black stripes have a thickness of 10 percent, from 45 to 55, we want to have 5 percent at the start and 5 percent at the end also black, to make a seamless transition from square to square in a repeated pattern.

1:53 Let's make that back to transparent. Instead of going from to 45 percent, we'll go from 5 percent to 45 percent. The first five percent will be black, from zero to five percent. Save that. You can see already that, on the top edge here, the stripe is pretty seamless.

2:09 Let's do the same for the end of the gradient. Instead of transparent 55 to 100, we'll go 55 to 95 percent and add the last 5 percent of black. Now, we have an absolutely seamless transition in our background pattern. I can change this back to 20 by 20. There we go. We have a really nice background striped pattern in place.