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

Alexandra McCardell
Alexandra McCardell
2,891 Points
Posted by Alexandra McCardell
Alexandra McCardell
2,891 Points

Mountain image never showed up in header for me...

I have the same content in place as in the video, not sure why the mountains won't display for me... :-(

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

Mod Edit: Fix code formatting, see comment below for how-to.

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Are you using a workspace? Can you post a snapshot? It is the camera icon in the upper right corner.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

When posting code, there is some markdown you can use to make it more readable. If you wrap your code in three back-ticks you'll get special formatting, and you can optionally add the language for fancy syntax highlighting.

```language

Your code here!

```

// Your code here!

5 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

The code that you posted works as expect for me using a workspace from the video, but you can post a snapshot of your workspace like KRIS NIKOLAISEN suggested if you're still have issues. There are a couple of general trouble-shooting ideas you can try if everything else seems fine.

Try hard-refreshing your browser preview. This would likely be Ctrl-F5 for Windows, or Cmd-R on OSX. Sometimes that can fix it if it's just a cache thing.

If you're doing the code in your own editor on your own machine, rather than in Workspaces, ensure you have the image file downloaded and in the expected local location.

Alexandra McCardell
Alexandra McCardell
2,891 Points
Alexandra McCardell
Alexandra McCardell
2,891 Points

I exited out of the example site and re-hit the eye icon and everything displayed properly...

Thanks everyone :-)

James Croxford
James Croxford
12,723 Points
James Croxford
James Croxford
12,723 Points

Just as a reference for anyone reading this in future, closing and re-loading the example site didn't work for me. Instead I also had to close the workspace and re-open it, and then relaunch the site for the background image to appear in the header element.

Delicia Wharton
seal-mask
.a{fill-rule:evenodd;}techdegree
Delicia Wharton
UX Design Techdegree Student 11,098 Points
Delicia Wharton
.a{fill-rule:evenodd;}techdegree
Delicia Wharton
UX Design Techdegree Student 11,098 Points

my background image still will not show and i have tried everything

.main-header {
  background-color: #ffa949;
  padding-top: 170px;
  height: 850px;
  background-image: url ('../img/mountains.jpg');  
}
Muhammad Khan
PLUS
Muhammad Khan
Courses Plus Student 8,772 Points
Muhammad Khan
Muhammad Khan
Courses Plus Student 8,772 Points

Try to save your code clicking save and then refresh your browser.