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
Tito Campos
5,183 PointsProblems with transparency in Dreamweaver
For some reason the syntax you explain in this video doesn't work for me. I'm not sure what the problem is.
What I did: I used other syntax from MDN.
Here it is:
background: linear-gradient(45deg, rgba(223,18,24,0.1),
rgba(82,53,53,0.4)), url(../img/main-banner-01.jpg);
This works perfectly. Can you please tell me why the syntax you explain in the video is not working for me?
4 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsAre you previewing in Dreamweaver, or opening the resulting file in a browser? If a browser, then which browser and what version?
Otherwise, try setting the gradient in Dreamweaver and seeing what the CSS it outputs is. That should tell you what syntax it is using (there used to be tons of different ways of doing it, with each browser handling it differently).
Here's an Adobe help article on this: Apply gradients to background.
Tito Campos
5,183 PointsThanks. I'll. heck the link you provided.
I am using last version of Mozilla Firefox to see all changes I'm doing in the website. I've tried several options but I'm having the same problem. Let me check the link and see if it's something withe Adobe software cause right now it seems like Dreamweaver doesn't recognize that kind of syntax (all code goes blue like there's an error)
Thanks again.
Iain Simmons
Treehouse Moderator 32,305 PointsJust realised that the code you pasted in the original question is the one that works for you, is that correct?
Can you paste the code you're using that doesn't work for you in Dreamweaver? And can confirm whether it's working in Firefox?
Tito Campos
5,183 PointsHello Ian, thanks for your help.
Heres's the code I've tried to use but it didn't work:
background: linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url("../img/mountains.jpg") no-repeat center;
everything turns blue in dreamweaver and it simply dones't work when I preview in latest version of Firefox, safari or chrome.
Thanks again.
Christopher van Ruitenbeek
13,705 PointsIn the second rgba you have an extra ')'. I believe that shouldn't be there.
Tito Campos
5,183 PointsHello Christopher. I've checked the code but that extra ) is the closing parenthesis from the one that is opening in 45deg.
I'll double check.
Thanks a lot for your help.
Tito Campos
5,183 PointsHello Christopher. I've checked the code but that extra ) is the closing parenthesis from the one that is opening in 45deg.
I'll double check.
Thanks a lot for your help.
Iain Simmons
Treehouse Moderator 32,305 PointsHere's a CodePen I threw together with the code you said didn't work for you... I can see the yellow-ish gradient in Chrome and Firefox (on Windows 7):
http://codepen.io/iainsimmons/pen/NqJgGG
Obviously I didn't have access to the image you're using, but does the image itself have a lot of blue? The last thing you put in the background of the CSS will be on top... I wonder if it's just covering the gradients?