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

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

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

Anna Takang Nchongarrey-Oben
Anna Takang Nchongarrey-Oben
7,365 Points

Thanks a lot. This worked for me

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

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

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

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

Caleb Burley
Caleb Burley
976 Points

Yes, this works for the challenge. Thanks!

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

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!?

Acie Slade
seal-mask
.a{fill-rule:evenodd;}techdegree
Acie Slade
Front End Web Development Techdegree Student 10,895 Points
Acie Slade
.a{fill-rule:evenodd;}techdegree
Acie Slade
Front End Web Development Techdegree Student 10,895 Points

I was also stuck here. Thank you all!

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 -_-

Sara Victoria
Sara Victoria
1,249 Points
Sara Victoria
Sara Victoria
1,249 Points

thank you...me too.

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;}

Keneque Thomas
Keneque Thomas
4,147 Points
Keneque Thomas
Keneque Thomas
4,147 Points

thank you lol

Gustavo Strogonoff
Gustavo Strogonoff
1,249 Points
Gustavo Strogonoff
Gustavo Strogonoff
1,249 Points

Thanks mikes02! :D

Chris de Ronde
Chris de Ronde
2,165 Points
Chris de Ronde
Chris de Ronde
2,165 Points

Thanks!

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!

Niels van den Bergh
Niels van den Bergh
2,948 Points
Niels van den Bergh
Niels van den Bergh
2,948 Points

Mee too thanks!

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!

Kaisha Jones
Kaisha Jones
6,366 Points
Kaisha Jones
Kaisha Jones
6,366 Points

thank you!