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

Muhammad Rizwan
Muhammad Rizwan
8,595 Points
Posted by Muhammad Rizwan
Muhammad Rizwan
8,595 Points

Finally, give .wildlife the property and value that forces any padding and border widths into its total width and height

Finally, give .wildlife the property and value that forces any padding and border widths into its total width and height

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;
  width: auto;
  height: auto;
}
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>
Ryan Moody
Ryan Moody
20,499 Points

Thank you!

19 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

Not sure what the exact challenge is but have you tried box-sizing?

.wildlife {
  box-sizing: border-box;
}
Justin Senne
Justin Senne
9,011 Points

I'm not the OP, but this is how I passed the task.

Andy Hammond
Andy Hammond
5,415 Points

Thanks! Its going to take some work getting used to all of these properties and values! Lot's to learn!

yazan hussein
yazan hussein
Courses Plus Student 4,525 Points

thanks for the help

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Give your self best answer, so we know its solved by seeing best anser :D and ud just gain your self 40points :D

Awais jamil
.a{fill-rule:evenodd;}techdegree
Awais jamil
Java Web Development Techdegree Student 4,742 Points

thanks

David Danko
David Danko
1,415 Points

yup this works :DDD

Jason Hess
Jason Hess
4,789 Points
Jason Hess
Jason Hess
4,789 Points

I've tried box-sizing: border-box; twice now and it's not working. Seems to be working for others but maybe I'll just try a refresh and start over. Seems to me like it's a trick question because the entire video is about background-image property and values and the box-sizing property was covered in the previous video.

Toby DeGrandpre
Toby DeGrandpre
1,530 Points
Toby DeGrandpre
Toby DeGrandpre
1,530 Points

Thank you! This worked for me. I take 3x as long to complete the videos b/c I take extensive notes (helps me remember). I do not have this anywhere in my notes. I think, possibly, it wasn't in the CSS track that I am taking.

Miika Vuorio
Miika Vuorio
8,018 Points

That's exactly what I put there on my first try. I've refreshed the page and it still doesn't work.-

Alexander Ayala
Alexander Ayala
4,023 Points
Alexander Ayala
Alexander Ayala
4,023 Points

I def was stuck until I found this thread! Thx!

Caleb Burley
Caleb Burley
976 Points
Caleb Burley
Caleb Burley
976 Points

Yes, this works for the challenge. Thanks!

Ryan Rassoli
Ryan Rassoli
3,365 Points
Ryan Rassoli
Ryan Rassoli
3,365 Points

Could anyone please explain to me what the box-sizing property does?

Marc-André Beaulieu
PLUS
Marc-André Beaulieu
Courses Plus Student 3,634 Points
Marc-André Beaulieu
Marc-André Beaulieu
Courses Plus Student 3,634 Points

You're the man. I had the same issue at this exercice. Its really a property that it isn't intuitive. Thank you for the answer.

Jack Guy
Jack Guy
1,299 Points
Jack Guy
Jack Guy
1,299 Points

Yeah I had to re-watch 3-4 videos and still didn't come across the answer. We had only used this property once before!?

MUZ140663 Question Ngwarati
MUZ140663 Question Ngwarati
11,782 Points
MUZ140663 Question Ngwarati
MUZ140663 Question Ngwarati
11,782 Points

.wildlife {box-sizing:border-box;}

asked to do so aswell!

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

Thanks this is helping me too. Practice makes perfect -_-

MUZ140663 Question Ngwarati
MUZ140663 Question Ngwarati
11,782 Points
MUZ140663 Question Ngwarati
MUZ140663 Question Ngwarati
11,782 Points

thanks Mikes02 was stack buddy .wildlife {box-sizing:border-box;}

christofer serrano
christofer serrano
2,983 Points
christofer serrano
christofer serrano
2,983 Points

Yeap So far on the lesson we saw the box-sizing property only once. But thats why it is a challenge jeje!

Amari Ashwood
Amari Ashwood
1,746 Points
Amari Ashwood
Amari Ashwood
1,746 Points

Thank you so much, guys!

Taylor Durkin
Taylor Durkin
4,832 Points
Taylor Durkin
Taylor Durkin
4,832 Points

helped me too, my first issue in this whole course!

Sofian Zahir
Sofian Zahir
3,502 Points
Sofian Zahir
Sofian Zahir
3,502 Points

thank you

shane smith
shane smith
5,247 Points
shane smith
shane smith
5,247 Points

Thanks all great help for me?

Lukas Bunn
Lukas Bunn
2,666 Points
Lukas Bunn
Lukas Bunn
2,666 Points

none of these worked for me, i finally figured it out, it was

background: #ffa949 url('img/bear.jpg');

Kevin Tempel
Kevin Tempel
4,689 Points
Kevin Tempel
Kevin Tempel
4,689 Points

Thank you!