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

Jason Brown
Jason Brown
9,626 Points
Posted by Jason Brown
Jason Brown
9,626 Points

I can't, for the life of me, figure out what I'm doing wrong!

All I get is the solid orange background. I've double and triple checked my work and have read through all the questions in this video. Please help! All of my work has worked up until this video.

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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Can you post it on codepen.io please?

4 Answers

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi Jason,

The CSS code is correct but when I open the developer console for the challenge I get a 404 status error on browser. It seems the browser is unable to locate the image on the server with the path provided on the video "url('../img/mountains-jpg')". If you were to download the project files and set them up in your own text editor I am sure it will work.

Kent Åsvang
Kent Åsvang
18,823 Points
Kent Åsvang
Kent Åsvang
18,823 Points

You mean to say that you can set the "no-repeat center" this way? I did not know this

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Yes the background shorthand syntax allows you to enter the following information. I am not sure why it did not work with workspaces. 

background:  bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

Thanks Daniel, I guess that's something I have no control over. I can move on! I even took a nap, cause I thought I was losing my mind!

Lewis Brookes
Lewis Brookes
5,717 Points
Lewis Brookes
Lewis Brookes
5,717 Points

Hi Jason

Looking at your code above it looked like you used 'mountains-jpg' rather than 'mountains.jpg'

Kent Åsvang
Kent Åsvang
18,823 Points
Kent Åsvang
Kent Åsvang
18,823 Points

There is something weird about you background-syntax' which I think is screwing up the code.. -> "no-repeat center"

This worked for me : 

.main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 50%), #ffa949 url("../img/mountains.jpg");
  background-size: cover; }

Hope this helped. Good Luck!

Jason Brown
Jason Brown
9,626 Points
Jason Brown
Jason Brown
9,626 Points

Mr. Bond 007 - I uploaded it to codepen.io, but I don't know how to add the folders where the image is located. I also just created an account just so I could show you, so maybe I glazed over a few steps ...

Daniel Gonzalez - That's weird, the file shows up when I go to the image folder.

I appreciate both of your time! Thanks!