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! While you're at it, check out some resources Treehouse students have shared here.
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
philpoccia
10,593 PointsCSS Gradients Extra Credit
I am going through the CSS Foundations course for the Web Design track. I finished the CSS Gradients section, but I am stuck on the extra credit. The extra credit is “Use the multiple background syntax to create multiple gradient layers on the .box div element.”
This is confusing me. Are they saying that they want multiple images layered on top of each other, or does it instead mean they want multiple gradients layered on top of each other (as shown in the first answer to this forum post located here: https://teamtreehouse.com/forum/css-gradients-advanced)?
Any snippet of code as an example would help greatly. Thank you in advance.
2 Answers
geoffrey
28,736 PointsI think guil shows how to do that in the video, at least if I recall well.
.box{
background-image: url(…);
background-image: url(…), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));
background-image: url(…), -moz-linear-gradient(#FFF, #000);
background-size: 10px 100px, 5px 5px;
-o-background-size: 10px 100px;
-moz-background-size: 10px 100px, 5px, 5px;
-webkit-background-size: 10px 100px, 5px 5px;
}
As you can see you can as well add, repeat an image if you specify the url between parenthesis.
philpoccia
10,593 PointsThanks for your help.