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

CSS

Posted by Philip Pasma
Philip Pasma
2,972 Points

How to do cover photos

How do you make cover photos for your website similar to http://www.hubspot.com/? I have no idea how to code it or what size of image I need.

Thanks

4 Answers

MIke Legemah
seal-mask
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points
MIke Legemah
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points

example: 

.hero{
      background: url( images/img.jpg);
      max-width: 100%;
      height: auto;
}
Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

Select (background-size:cover), and then adjust the height and width etc.

Hope that helps:)

Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

Sorry, select (background-size:cover) directly under your (background: url....)

MIke Legemah
seal-mask
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points
MIke Legemah
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points

Hi , when I inspect the element in Chrome, it says the hero image is 2784px by 1848px. I would set the max-width: 100%; and height: auto