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
Luisa Nino
1,532 PointsBackground-size: cover
I am having problems when using this CSS property. No image displays in the div I'm applying 'cover' to. I'm wondering if I have to specify a height. It only appears when there is content in the div. I've read the specification but I can't seem to make it work. Basically it's a div with a background image that I want it to take up the whole space.
I hope this makes sense. Thank you.
3 Answers
Brendan O'Brien
9,066 PointsI'm pretty sure you need a height applied if you want it visible all the time. Are you using on a div or on body?
James Barnett
39,199 PointsIn order for an element to rendered on the page it has to have both a height and a width. Background don't take up space, so if you have a <div> without any content and only a background you need to specify width and height on the other hand if you want a background to behind content you don't need to set a size.
To see the difference compare using a text with a background using cover now if we remove the text we can create a div with a background we just have to set the size of the div.
Luisa Nino
1,532 PointsThank you! Your example is really helpful.
Well, yes I had applied a height and I could see my image but then it lost it's responsiveness. I guess I'll attack with a media query?
Thank you.
James Barnett
39,199 PointsUsing media queries & percentages for width help make your images more fluid as they say.