Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

leo kamin
leo kamin
5,550 Points
Posted by leo kamin
leo kamin
5,550 Points

striped backgrounds

I have done some poking around and come up with the

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

method from multiple sources but none of them explained why that worked. i am just looking for a little explanation.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Leo,

For ease of explanation I'm going to change the first color to red and the second color to blue.

background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px
  );

So first we have the gradient turned 45 degrees clockwise. Then we have the beginning color stop which is red. The second color stop is 10px from the first in the direction of the gradient and it is also red. So we're going from red to red over a length of 10px. This produces a solid 10px wide red strip.

The third color stop is at the same position as the second color stop so we have a sharp transition from red to blue. The 4th color stop is again blue and 10px from the 3rd, or 20px total from the first. So we're going from blue to blue over a length of 10px producing a solid blue strip.

The gradient then repeats. Since the last color stop is different from the first color stop we have another sharp transition from blue to red as it starts to repeat again.

I hope this makes sense.

Here's the mdn page on it:
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

Let me know if there's anything that's still not clear to you.