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) Basic Layout Backgrounds: Color and Images

Michael Lara
Michael Lara
1,454 Points

Mountain image does not appear

I'm at the step where we add the mountain image through the css style sheet and i've coded it as the lesson shows however the mountain image does not appear. Any idea where i went wrong?

.main-header {
  background-color: #ffa949;
  padding-top: 170px;
  height: 850px;
  background-image: url('../img/mountains.jpg');

Have you verified that image is in your img folder?

6 Answers

Oliver Klein
Oliver Klein
10,985 Points

This this: background-image: url(../img/mountains.jpg);

You don't need to wrap the image path in ''

Michael Lara
Michael Lara
1,454 Points

Thank you so much! That did the trick and allowed me to keep on keeping on.

Jean-Sébastien Gagné
Jean-Sébastien Gagné
10,019 Points

I had the same issue, because I changed the workspace for the course and didn't click for a new preview (just refreshing wasn't working). Maybe it'll help someone !

terrence henesy henesy
terrence henesy henesy
1,286 Points

OMG! Nailed it. I had the same problem and tried everything. This saved me, thanks!!

Lisa Crowley
Lisa Crowley
4,793 Points

I had this same problem - why is wrapping the image path within quotation marks acceptable in the video but doesn't work within Workspaces?

Hi Lisa,

I was surprised that removing the quotes fixed the problem. I suspect something else was going on like a browser caching issue.

As you noted, It works for Guil in the video and Guil is using workspaces too. I just launched the workspace for this video and put in the background-image with single quotes exactly like the video and the background image worked for me.

For this particular example, you could use double, single, or no quotes at all and it should work exactly the same. The css specification allows for all 3.

It is generally recommended though that you always use quotes around your paths.

I would try to put the quotes back in and get that working so you can start developing that habit. Make sure you save the file and refresh the preview. Clear your browser cache if that fails.

Harmen Struiksma
Harmen Struiksma
3,406 Points

I had the same problem. The mountain image didn't appear. Clearing the chache helped. I Thought i was doing something wrong, but it's a browser thing. Phew.

Had the same issue. Solved the problem by closing out the webpage that was open and relaunched the preview from the workspace. Fixed the problem, definitely a browser issue.

I've been stuck on this problem for a long time, searching for answers. Eventually, I cleared the cache on Chrome and restarted the browser. Everything is now showing up!

Hope this helps.

Thanks I'm on this step and this saved me a lot of headache!