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

Posted by Kristina Gillooly
Kristina Gillooly
9,546 Points

Lost my mountains during transparent gradient session

While learning about backgrounds and linear-gradients and radial gradients, at some point i lost my mountains.jpg background image and not sure where i have gone wrong.....any suggestions?

Marcus Parsons
Marcus Parsons
15,719 Points

Can you please post a snapshot of your Workspace? http://www.teamtreehouse.com/forum/workspace-snapshots

Kristina Gillooly
Kristina Gillooly
9,546 Points

https://w.trhou.se/1tqql1u5ko let me know if this works or not.....my first snapshot

Marcus Parsons
Marcus Parsons
15,719 Points

I was finally able to post a snapshot with files in it haha It only took me 10 tries! XD

3 Answers

Kizzy Iz
Kizzy Iz
5,283 Points
Kizzy Iz
Kizzy Iz
5,283 Points

I lost my image as well. When I deleted the space between gradient and the 1st parenthesis, this fixed my problem. Weird because I compared my code and the code from the project files. The only difference was the space.

background: linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/mountains.jpg') no-repeat center;

Marcus Parsons
Marcus Parsons
15,719 Points

There was a missing / in the path name and there was also a radial gradient still declared, although it wasn't declared correctly.

Kristina Gillooly
Kristina Gillooly
9,546 Points

The space was the issue.....thank you.....!!! I tried to add the / before img and that didnt work....then i added the - to radial-gradient and that didnt work.....but I think Marcus mentioned this in his very first response and I didnt understand....now i get it i think!!! Thank you to everyone for your responses....so good to know there is always help out there!!!

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Kristina,

You had a bunch of wrong code in your style.css. Anytime you're calling a command that uses parenthesis, you always put the command right next to the parenthesis. Don't leave a space in between the command and the parenthesis. Also, you had forgotten a / in your url. And I deleted the radial gradient that wasn't supposed to be there. Any CSS command that is more than one word generally has a - in between the two words but if you're confused about what the name is, just type what it is into Google like "radial gradients css".

Here is a snapshot of your updated workspace: https://w.trhou.se/snw3by9v40

Kristina Gillooly
Kristina Gillooly
9,546 Points

Thanks for your help!!! still having trouble understanding the command and parenthesis you are talking about.....i cant seem to be able to view the updated workspace ?? thanks again!

Marcus Parsons
Marcus Parsons
15,719 Points

Treehouse's snapshots are pretty frustrating right now lol It took about 10 attempts to get a snapshot with files in it haha here it is: https://w.trhou.se/ol696v767y

Kristina Gillooly
Kristina Gillooly
9,546 Points

Thank you!

Victoria Felice
Victoria Felice
14,760 Points
Victoria Felice
Victoria Felice
14,760 Points

Hi Kristina,

I was not able to see Marcus's updated workspace either. I noticed one missing "/" in the image path in your css code:

ffa949 url ('..img/mountains.jpg') no-repeat center;

Just add a "/" before img:

ffa949 url('../img/mountains.jpg') no-repeat center;

That might be the reason you don't see your mountains.jpg. Another small thing is a missing "-" in "radial-gradient": background: radial gradient (circle at top right, #ffa949 0%, firebrick 60%, dodgerblue 120%); Hopefully, this will solve the problem.

Marcus Parsons
Marcus Parsons
15,719 Points

The radial gradient, although it is missing a - to make it a successful command, is deleted so that it doesn't override the effect from the linear gradient. It shouldn't be in the stylesheet anymore. It's not in the stylesheet in Guil's video/workspace for good reason.

Victoria Felice
Victoria Felice
14,760 Points

I actually voted "up". Not sure what happened. You did a great job helping Kristina for sure!

As for her radial-gradient, I think she was just trying to experiment. :)

Marcus Parsons
Marcus Parsons
15,719 Points

I deleted that comment after I realized it wasn't you. There are certain people on this board who are very unhelpful and can't take criticism very well (and deserve to have their moderator status revoked). I apologize for calling you out. Here lately, some of the moderators and people that think they know better than everyone else have made me want to stop helping on this board. About 1/4 - 1/3 of my current points on here comes from the forums alone, so I've helped a lot of people. But I just don't feel like it most of the time anymore lol.

Victoria Felice
Victoria Felice
14,760 Points

Keep up the good work helping people! I am sure they appreciate it. I did not know about the points. Thanks for the tip. :)

Marcus Parsons
Marcus Parsons
15,719 Points

Thank you for the kind words. :) Oh yea, you can go just go to your profile and hover your mouse over the different topics and it will show your points split into two groups: achievements and forum. :P Happy Coding, Victoria!

Kristina Gillooly
Kristina Gillooly
9,546 Points

Thank you both!!!!