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 Kim Dallas
Kim Dallas
11,461 Points

I did exactly what he said to do?

this is exactly how he said to place the image of the bear.

style.css 
/* Complete the challenge by writing CSS below */
.wildlife {
  background-image:url ('../img/bear.jpg');
}
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>
Mihael Hunjet
Mihael Hunjet
3,397 Points

Hi Kim it's going only 'img/bear.jpg' as the img is not stored in only one folder. Happy coding Kim

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Kim,

You're on the right track! :thumbsup: ... Just a couple of things.

  1. When you click "check work" you are getting the error message that is telling you to make sure to "set the background image value to 'img/bear.jpg'." because it is located in the same folder. Right now, you are telling the url() to go up one directory (by prefixing the path with ../, so that should be deleted.
  2. Once that is fixed, you get the same error which is misleading and inaccurate (sometimes the code checker does that). Here the error lies with the space you've included between url and (). Normally whitespace is irrelevant in CSS, except for using its methods and the url() method is one example. With a space, the interpreter gets confused and does not know the parenthesis that follow are attached and related to the method. So, just get rid of that space and you're good to go!

Nice work! :) :dizzy:

Kim Dallas
Kim Dallas
11,461 Points
Kim Dallas
Kim Dallas
11,461 Points

thank you Jason. I got it all the way to the background sizing. I don't understand that part of placement. how do you measure the page?

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Kim,

For this, you don't need to measure the page. You'll be using the box-sizing rule with a value of border-box. This forces the element this is applied to to fill all space including padding and margins. This is covered earlier on in the course in this video at the 30s mark. I haven't worked with CSS for quite some time, so I'm glad you asked. It got me to go back and brush-up my CSS knowledge a bit. :eyes:

Thanks :) Hope it helps!