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 Framework Basics Build a Website with Bootstrap Building the Hero Component

Leigh Maher
Leigh Maher
21,830 Points

Why make the hero graphic a background image?

Why do we need to make the hero graphic a background image here, as we're not placing any content on top?

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points

For a hero image, you really want the image to display correctly and display as much as possible across all screen sizes. When you use an img element, it becomes difficult to size it correctly for various screen sizes, even inside of a parent div. With a background image, however, you can use background-size: cover; which will ensure that the image displays as nicely as possible for all sorts of devices.

Leigh Maher
Leigh Maher
21,830 Points

Ok. Thanks Ryan. I wasn't aware of that.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

No worries. It can be confusing for sure since, like you said, it is an image after all. :)