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 Jordan Siu
Jordan Siu
10,042 Points

background-size: cover; not working?

Hey guys. I'm trying to make my hero image cover my .main div area and place a footer at the bottom, however I'm not entirely sure where my code has gone wrong. When I use the inspect mode on Chrome and set it to display on different laptop devices, I get different results. Idk if this has anything to do with it but background-size: cover; doesn't seem to be recognized by the validator.

Here's the HTML:

<body> <div class="main">

  <header>
    <a href="new.html"><img class="logo" src="images/pacman.png" alt="Pacman Logo"></a>
    <nav>
      <a href="x" class="navbar">Home</a>
      <a href="x" class="navbar">Animation</a>
      <a href="x" class="navbar">Photography</a>
      </nav>
  </header>

  <section>
    <h1>Hey</h1>
    <p>My name is Jordan. I'm an SF native. I love film-making and animating.<br>
      I have a bunch of links, check em out when you have the time.
    </p>
  </section>

  <div class="button-container">
    <a href="#" class="button">Click</a>
  </div>

</div>

  <footer>
    <img src="images/2d.jpg" class="round-img">
    <address>
      <a href="mailto:xxxxxx@gmail.com">
        Contact Me
      </a>
    </address>
      <script type="text/javascript">
        var dateModified = document.lastModified;
        mydate = dateModified.slice(0,16);
        document.write("Last updated: " + mydate);
      </script>
  </footer>

</body> </html>

And here's the CSS:

body {
  margin: 0px;
  font-family: "Cabin", sans-serif;
}

.main {
  height: 90vh;
  background: url(../images/hero2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 10px red dashed;
}

header {
  margin-top: 0px;
  width: 100%;
}

.logo {
  float: left;
  margin: 1% 5% 1% 10%;
  background-color: #fff;
  border-radius: 100px;
}

nav {
  float: right;
  margin: 1% 5% 1% 2%;
}

.navbar {
  color: #fff;
  font-size: 1em;
  margin-left: 20px;
  text-decoration: none;
}

.navbar:hover {
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 20);

}

section {
  width: 100%;
}

h1 {
  font-size: 5em;
  font-weight: lighter;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  clear: both;
  padding-top: 6%;
  margin-bottom: 2%;
}

p {
  font-size: 1em;
  color: #fff;
  text-align: center;
  margin: 7% auto 5%;
  padding-bottom: 30px;
}

.button-container {
  text-align: center;
  margin: auto;
}

.button {
  color: #fff;
  text-decoration: none;
  border: 2px #fff solid;
  padding: 20px 50px;
}

.button:hover {
  text-shadow: 0px 0px 30px rgba(255, 255, 255, 2);
}

footer {
  border: 10px green solid;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  color: #fff;
  background-color: #162021;
}

.round-img {
  width: 125px;
  height: 125px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  margin-bottom: 1em;
}

address > a {
  color: #fff;
  text-decoration: none;
  margin-left: 2%;
}

script {
  margin: auto;
}

Let me know if you'd like me to break my code into chunks or something.

1 Answer

Julie Myers
Julie Myers
7,627 Points

Your browser might not support the vh value. So, try using this coding:

.main {
  background: url('../images/hero2.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
// Add background-position later...not to sure you need it.

// As a comparison, this is the coding you currently are using:
.main {
  height: 90vh;
  background: url(../images/hero2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 10px red dashed;
}
Jordan Siu
Jordan Siu
10,042 Points

I'm using Chrome. Thanks but it doesn't seem to be working.

Julie Myers
Julie Myers
7,627 Points

Hey Jordan,

What results are you getting that are incorrect?

Julie

Jordan Siu
Jordan Siu
10,042 Points

My footer keeps covering up my button.

Jordan Siu
Jordan Siu
10,042 Points

Solved it! Apparently it was a combination of my .main and footer. Your solution worked, however the height: 100%; kept cutting off my hero image so I reverted it back to vh:

.main {
  background: url('../images/hero2.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

/*Here's the footer*/

footer {
  margin-top: 0%;
  padding: 2rem;
  color: #fff;
  background-color: #162021;
}
Julie Myers
Julie Myers
7,627 Points

Cool. Glad it's figured out.