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 trialMaddie Duffy
3,659 PointsNot 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??
1 Answer
Mark Ramos
19,209 PointsYou 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;
}
Cory Stover
3,341 PointsCory Stover
3,341 Pointsbackground: #ffa949 url('../img/mountains.jpg') no-repeat CENTER / COVER;
You left out the forward slash after center and the cover. :)