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

HTML

Owen Boochever
Owen Boochever
14,582 Points
Posted by Owen Boochever
Owen Boochever
14,582 Points

How 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?

https://munchery.com/

2 Answers

sean murphy
sean murphy
9,435 Points

CSS 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.

sean murphy
sean murphy
9,435 Points

For 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/

Matt McLean
Matt McLean
11,872 Points
Matt McLean
Matt McLean
11,872 Points

From 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
Owen Boochever
14,582 Points
Owen Boochever
Owen Boochever
14,582 Points

Matt, 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
Matt McLean
11,872 Points
Matt McLean
Matt McLean
11,872 Points

Hi 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?