Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Boonsuen Oh
Boonsuen Oh
18,788 Points

background-size: cover;

Hi, I have included background-size: cover but the background-image is still crops and collapse Here's the code.

<body>

  <div id="main-menu">
        <nav class="seventy-pc-width">
        <h1 id="logo">&lt;ZAYN OH&gt;</h1>
        <ul>
            <li class="active">&lt;&#47;ABOUT</li>
            <li>BLOG</li>
            <li>CONTACT&gt;</li>
        </ul>
        </nav>
    </div>

  <div class="row"></div>
  <div id="main-header">
      <div class="seventy-pc-width main-header-container">
          <h2>learn.Try {and + Pratice}</h2>
          <h1>I LOVE CODING</h1>
      </div>
  </div>
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

#main-header {
  height: 420px;
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-image: url('img/main-header-bg.gif'); 
  background-size: cover;
  background-repeat: no-repeat; 
}

The exact image used for background: here The result of current code: here

2 Answers

Steven Parker
Steven Parker
216,012 Points

You didn't say what you wanted to happen. But here are your choices:

  • fit width and crop height: "background-size: cover"
  • fit height and leave excess width blank: "background-size: contain"
  • fit the image to the container by stretching: "background-size: 100% 100%"
  • fit the container to the image: "width: 800px; height: 600px;" (for this particular image's size)
Boonsuen Oh
Boonsuen Oh
18,788 Points

Any way to make the background image auto adjust itseft to fit the width and height, without any crops or blank?