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: Size and Position

Posted by Maddie Duffy
Maddie Duffy
3,659 Points

Not working when all on same line

When all the code is on separate lines the picture appears fine. But when I put all the code under "background", the picture is zoomed in and cut off round the edges.

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

What am I doing wrong??

Cory Stover
Cory Stover
3,341 Points
Cory Stover
Cory Stover
3,341 Points

background: #ffa949 url('../img/mountains.jpg') no-repeat CENTER / COVER;

You left out the forward slash after center and the cover. :)

1 Answer

Mark Ramos
Mark Ramos
19,209 Points
Mark Ramos
Mark Ramos
19,209 Points

You have background-size on its own separate line, which is fine, but because it's listed before background, it is being overwritten by background. If you want to put background-size on its own line, make sure it is put after background so that it can overwrite the size property set by background.

Your code:

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

Correct code: 

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