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
Manish Giri
16,266 PointsMeaning of "background area" of element?
In this video, while applying a background-size of 40%, the instructor says - "keep in mind that the width is calculated according to the background area of the element, and not relative to the actual image. While I understand the image part, what's the meaning of "background area of the element"?
Umy Ikem
21,383 Pointsthe background area of the main-header element, he set the background size of the image to 40%. 40% of the main-header element. You can look at the main-header element as the container for the background image so 40% of the main-header box. The background-area = width & height of main-header box
1 Answer
Esther Newman
Courses Plus Student 5,015 PointsThanks eric, i had a similar question but in relation to getting the image either fully across the containing div but at half the height or the other way. your answer helped point me in the right direction. My resulting code was:
background-size: 100% 50%;
or
background-size: 50% 100%;
Erik c
Front End Web Development Techdegree Student 3,560 PointsErik c
Front End Web Development Techdegree Student 3,560 PointsOne thing to understand about the background-size is that it can take two values the first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". If you see closely at the example the video shows, if you add all three images that go across and they will equal 100% (40% + 40% + 20%)