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

Boonsuen Oh
Boonsuen Oh
18,788 Points
Posted by 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
230,274 Points
Steven Parker
Steven Parker
230,274 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
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?

S M
S M
892 Points
S M
S M
892 Points

This article might help https://css-tricks.com/perfect-full-page-background-image/