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 Jonathan Cooper
Jonathan Cooper
11,938 Points

The header image won't appear.

There's just a black screen as the background image.

Cena Mayo
Cena Mayo
55,236 Points

Hi Jonathan,

Please post your code so we can take a look. :)

Best, Cena

2 Answers

Roy Penrod
Roy Penrod
19,810 Points

Hey, Jonathan ...

It looks like an issue with the URL path and some errors with the CSS syntax.

My guess is that your html is in a file called index.html in the main project directory and your mountains.jpg image is in a directory called "img". In that situation, here's what your CSS should look like:

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

I don't think you can add cover as part of the background property shorthand. I tried it and I couldn't get it to work until I added the background-size: cover; statement below it.

Jonathan Cooper
Jonathan Cooper
11,938 Points
Jonathan Cooper
Jonathan Cooper
11,938 Points

The thing that I'm working on is part of the video, Backgrounds: Size and Position.

.main-header {
  padding-top: 170px;
  height: 850px;
  background: #ffa949 url('../img/mountains.jpg') no-repeat center / cover;
}