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 trialOwen Boochever
14,582 PointsHow are the background images integrated on Munchery's homepage?
Was poking through an attractive food-delivery service's website's source code, and noticed I couldn't find how the site's developers had loaded in the screen-width background images (e.g. the wood dinner table with plated food you see upon loading). Google Dev Tools weren't much help. Any thoughts?
2 Answers
sean murphy
9,435 PointsCSS has a few scaling options, aside from the width attribute. Using background-size, you can do some pretty things. In their website, they have the background-size to cover, which will make the image cover the entire element
.container{
background-image: url(some_image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Another good option is contain, which will make the background image fit inside the element.
Matt McLean
11,872 PointsFrom what I can tell, they do this using background-image. For the table w/ plates:
section.f-strata.one {
background-image: url(/assets/homepage/heroes/flex-hero-0e3412d32c49056ae18d71b721274737.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Owen Boochever
14,582 PointsMatt, awesome! Thank you. Q: any way for me to organize the way the CSS displays when I view the file in my browser? I could have probably found that code myself, except my Chrome browser displays CSS files as pure plain text with no line breaks!
Matt McLean
11,872 PointsHi Owen - I'm not sure, I used the 'inspect element' functionality in Chrome. Maybe there's a browser extension you could use to do what you're talking about?
sean murphy
9,435 Pointssean murphy
9,435 PointsFor a more in-depth explanation of full-width background images, CSS tricks has a great article with a variety of options! https://css-tricks.com/perfect-full-page-background-image/