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
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsSome questions about the principle of background icon.
In our code the background image is functioning as an image on the left comparing the text and not as background image. Why use is as a background and not as a left aligned inline image? This is quite confusing don't you think?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Maya,
The reason the icons are added in the css is because they're stylistic images and not part of the content for the page.
At around 0:30, Guil mentions adding some css enhancements to the page. You can think of these icons as enhancements to the page. They don't provide any additional content or meaning to the page.
As a general rule, if the image is part of the content of the page then it goes in the html and if it's part of the design then it belongs in the css as a background image.
This lesson here is a good example of both. You have the 6 gallery images which are placed in the html. These images are the main point of the page and should be in the html. The icons make the page look nicer but they're not essential and it would be better to place them in the css.
Steven Parker
243,656 PointsI'm not sure of the reasons for the choices made in the video, but a couple of things that might make a background preferred over a foreground image are:
- there are different CSS properties that can be set on backgrounds vs. images
- an inline image might affect the size of its container, but a background would not
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsThank you friends for you answers. It really helped me to understand better!
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsMaya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsThis is the lesson reference: https://teamtreehouse.com/library/css-selectors/going-further-with-attribute-selectors-and-pseudoclasses/substring-matching-attribute-selectors-begins-with-and-ends-with