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 Daniel Silva
Daniel Silva
10,644 Points

"Cover" element doesn't seem to work.

When I was watching the HTML/CSS course with Guil. He had mentioned that the "cover" element can be used to fit an entire image into a background header. I can't seem to get it to work. I use Aptana studio and netbeans for development. Any suggestions or alternatives?

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points 
div {
    background: url(img_flwr.gif);
    background-size: cover;
    background-repeat: no-repeat;
}

cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

Just providing an example of the CSS and what cover is supposed to be doing. It shouldn't matter what IDE you are using. Only providing in case perhaps you are using the property incorrectly. Best of luck.

Kreig Durham
Kreig Durham
8,829 Points
Kreig Durham
Kreig Durham
8,829 Points

We would need a specific example of the code that's giving you trouble in order to tell what may be the problem.