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

CSS CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Ryan Southard
Ryan Southard
2,406 Points
Posted by Ryan Southard
Ryan Southard
2,406 Points

I don't get the frosted effect at the bottom.

Checked my code against that in the video three times, hard refreshed, closed and relaunched from workspaces, nothing.

1 Answer

hl9
hl9
8,443 Points
hl9
hl9
8,443 Points

Hi Ryan,

This worked for me:

.main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%),
              linear-gradient(0deg, #fff, transparent),
              #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
}

Did you remember to set the second linear-gradient to "0deg" -- zero degrees?