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 abdirahim Maslah
abdirahim Maslah
2,060 Points

background-image

.wildlife { background-image: 'url("../img/bear.jpg")'; } this my code for setting background image for wildlife class inside a div tag. the image resides in a images folder. that is why i have ../ to get off the css folder. i have tried other compensations such as removing ../. that has not worked either.

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>
Kristoffer Lund
Kristoffer Lund
11,133 Points
Kristoffer Lund
Kristoffer Lund
11,133 Points

background-image: 'url("img/bear.jpg")'; It shouldn't be in quotes.

background-image: url("img/bear.jpg");

3 Answers

abdirahim Maslah
abdirahim Maslah
2,060 Points

<link rel="stylesheet" href="css/style.css"> this is what i have in my index.html file this indicates that style.css file is inside the css folder. i greatly appreciate your help. with out your help this problem would have remind unsolved for sometime. i see that your doing techdegree, i am currently frontend track and planing to start the techdegree afterwords. i will appreciate any tips or advice as your a head of me and know more than i do. keep up the good work my friend. Thanks

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Look at the original code you posted with the question and you'll see that the <link rel="stylesheet" href="style.css"> and is not href="css/style.css"

I think you are looking in your Workspaces that you use to follow along with the videos. In that case, they use a css folder to hold all the css files, but for this particular challenge that's not the case.

This is the index file for the code challenge:

<!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>
Chris Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points
Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Your error occurs with the quotes around url. Remove those and you're good to go.

.wildlife {
 background-image: url("img/bear.jpg");
}
abdirahim Maslah
abdirahim Maslah
2,060 Points
abdirahim Maslah
abdirahim Maslah
2,060 Points

.wildlife { background-image:url("img/bear.jpg"); } This worked but i what i want to know is. since style.css is a file that resides inside css folder, shouldn't we go one directory up ../ to be on the same level as the image folder. so that right code should be .wildlife { background-image:url("../img/bear.jpg"); }

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

styles.css does not reside in a css folder in this particular challenge. You can verify that by looking at the index.html file and seeing that the stylesheet is linked with a relative path of only itself... thus not in a CSS folder.