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 CSS Basics (2014) Basic Layout Styling the "Wildlife" div with Background Properties

Harper Frankstone
Harper Frankstone
5,156 Points
Posted by Harper Frankstone
Harper Frankstone
5,156 Points

Forcing padding and border into total width and height

I am not sure what property and value this challenge is calling for. I must have missed this in the video.

As always, thanks for the help!!

style.css 
/* Complete the challenge by writing CSS below */

.wildlife {
  background-image: url('img/bear.jpg');
  background-repeat: no-repeat; 
  background-position: center;
  background-size: cover;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
        <div class="primary-content t-border">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->
            <a class="callout" href="#wildlife">See the Wildlife</a>
        </div><!-- End .primary-content -->
  </body>
</html>

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

Try taking out the last 2 lines in your CSS. It looks like those are getting the challenge confused. You're only looking to force the browser to render the image once which is what no-repeat does.

Good luck :)

Harper Frankstone
Harper Frankstone
5,156 Points
Harper Frankstone
Harper Frankstone
5,156 Points

Hey,

So I tried that and it didn't work out. The background size and position need to be there, because they are from earlier in the challenge.

This is the message: 'Make sure you're defining the property and value that forces padding and borders into the width and height of '.wildlife'.'

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

That's odd.

This is the code I used that beat the challenge.

.wildlife {
  background-image: url('img/bear.jpg');
  background-repeat: no-repeat; 
}
Harper Frankstone
Harper Frankstone
5,156 Points
Harper Frankstone
Harper Frankstone
5,156 Points

Yea, that is odd. When I try to submit that code for the final part of the challenge, it tells me that I'm missing the code from earlier parts of the challenge. Is there code that forces any padding and border width into the width and height of the element? I thought that was what happened by default.

Carol Davis
Carol Davis
2,581 Points
Carol Davis
Carol Davis
2,581 Points

I ran into the same issue as you. I finally added box-sizing: border-box; and it worked