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

Posted by Luke Tower
Luke Tower
8,861 Points

CSS3 - Project: Part 2

I'm having trouble getting the following background texture and gradient to work. The path is correct. I can get the image to load if there is no gradient and I can get the gradient to load if there is no image. However, I cannot get them both to load. I have re-checked the code multiple times and can't find a solution. I'm assuming it's a compatibility issue. Any help is appreciated. Here is the code.

background-image: url('../images/static.png'), -webkit-gradient(radial, center, center, 0, center center, 300, from(#094a32), to(#01150f));

Thank you in advance for any help you can offer. Cheers!

7 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Luke,

Try using background instead of background-image.

Luke Tower
Luke Tower
8,861 Points
Luke Tower
Luke Tower
8,861 Points

Guil,

Thanks for the speedy response!

I tried running it with background instead of background-image .

No success. Shucks!

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Luke,

Can you please create a CodePen?

Thanks!

Luke Tower
Luke Tower
8,861 Points
Luke Tower
Luke Tower
8,861 Points

Guil,

I've never done this before. I think this link should work. Let me know

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thanks Luke,

I noticed you have a comma between both center values: 

webkit-gradient(radial, center, center, 0, center center, 300, from(#094a32)

Remove the comma and it should work.

This video is also a bit outdated, so it's using an older version of the syntax. Check out my latest Deep Dive on CSS gradients for the latest browser-compatible syntax.

Luke Tower
Luke Tower
8,861 Points
Luke Tower
Luke Tower
8,861 Points

Guil,

That darn little comma! It works now. Thanks so much for taking the time to check this out.

I have gone through your course, but being a beginner, I'm still absorbing and much of the information is not committed to long-term memory.

Thanks again. Take care!