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 True Andrews
.a{fill-rule:evenodd;}techdegree
True Andrews
Front End Web Development Techdegree Student 10,520 Points

How is this supposed to be written?

I'm not sure how this is coded.

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>
Podrig Leoghain
Podrig Leoghain
5,094 Points
Podrig Leoghain
Podrig Leoghain
5,094 Points

The CSS is trying to reference an id whereas the HTML specifies 'wildlife' as the div's class. Make your CSS call .wildlife rather than #wildlife.

Hope this helps.

True Andrews
.a{fill-rule:evenodd;}techdegree
True Andrews
Front End Web Development Techdegree Student 10,520 Points

It doesn't work. It says add it as a class, not id.

Podrig Leoghain
Podrig Leoghain
5,094 Points
Podrig Leoghain
Podrig Leoghain
5,094 Points

It should work. Have you tried indenting the 'background-image' line of code?

.wildlife {
    background-image: url("../location/of/image");
    }

1 Answer

Chris Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points
Chris Hall
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points

In your style sheet you have #wildlife: which is calling the ID of wildlife. In the HTML there are two selectors with the value wildlife, one Class, and one ID. I'm guessing the challenge is asking you to set the class for the declaration you already have that features a background image of a bear. Then in the next step I'm guessing you'll make a declaration for the ID.

/*Class*/
.wildlife {}

/*ID*/
#wildlife {}
True Andrews
.a{fill-rule:evenodd;}techdegree
True Andrews
Front End Web Development Techdegree Student 10,520 Points

I tried both, it doesn't work.

Chris Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points
Chris Hall
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points

I looked at the challenge. You're on task one, correct? The Create a new rule that targets the class 'wildlife'. Set the bear.jpg image, located in the img folder, as the background image. task?

If so I think I spotted the problem.

Your code:

#wildlife {
  background-image: url('../img/bear.jpg'); 
}

First issue, which has been gone over already is that you have an ID selector instead of a Class selector. Let's see what happens when we change it to...

.wildlife {
  background-image: url('../img/bear.jpg'); 
}

Oh no! It's still not passing. Which brings us to the second issue. The task tells us that the image bear.jpg is located in the img folder. Since we're assuming the style.css and index.html are both living in the same directory then url('../img/bear.jpg isn't going to work.

When we call something like an image in our CSS file it's path is always relative to the CSS file it's self. By using ../ we're saying the thing we're looking for (in this case the image) is a directory above the CSS file. In this challenge that isn't true since our style.css is in the root directory.

Currently our directory would look something like this..

-|img|
└-bear.jpg
-style.css
-index.html

So when we fix the path we'll get this..

/* Complete the challenge by writing CSS below */

.wildlife {
  background: url("img/bear.jpg")
}

..which passes the task requirements.