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

Tito Campos
Tito Campos
5,183 Points
Posted by Tito Campos
Tito Campos
5,183 Points

Problems 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
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Are 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
Tito Campos
5,183 Points
Tito Campos
Tito Campos
5,183 Points

Thanks. 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
Iain Simmons
Treehouse Moderator 32,305 Points

Just 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
Tito Campos
5,183 Points
Tito Campos
Tito Campos
5,183 Points

Hello 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
Christopher van Ruitenbeek
13,705 Points
Christopher van Ruitenbeek
Christopher van Ruitenbeek
13,705 Points

In the second rgba you have an extra ')'. I believe that shouldn't be there.

Tito Campos
Tito Campos
5,183 Points
Tito Campos
Tito Campos
5,183 Points

Hello 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
Tito Campos
5,183 Points
Tito Campos
Tito Campos
5,183 Points

Hello 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
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Here'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?