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 trialLeigh Maher
21,830 PointsWhy 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
Courses Plus Student 21,242 PointsFor 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
21,830 PointsOk. Thanks Ryan. I wasn't aware of that.
Ryan Field
Courses Plus Student 21,242 PointsNo worries. It can be confusing for sure since, like you said, it is an image after all. :)