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 Sara Brothers
Sara Brothers
7,341 Points

code challenge for background size and position

I added the bear image to wildlife but I am missing something. What is it?

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">
          <img class="bear" src="img/bear.jpg">
        <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>
Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

As I can see from the html code, the css file located at the same level as html file. Probably, instead of url('../img/bear.jpg') you need just url('img/bear.jpg')

7 Answers

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

Hey there, you just have to remove the double dotes before at the begining of your url, cause the css file, is in the same level of img folder .

.wildlife {
  background-image: url('img/bear.jpg');
}
Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

You don't have to put <img class="bear" src="img/bear.jpg"> in html file just in css

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

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

not that Denis Omerovic , the css file is in the same stage of the folder img. the double dotes would get out from the whole directory and go to search a folder called img. which doesnt exist ;). so you just have to type (img/..) so that it search the folder 'img' in the same directory itself !!

Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

Yes you don't need double dotes but also i think you dont need <img class="bear" src="img/bear.jpg"> in html file.

Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

you have img with class bear in html file. You don't need that for background image

Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

just in css background image

Stefan Mach
Stefan Mach
3,691 Points
Stefan Mach
Stefan Mach
3,691 Points

Agreed about having image in both html and css. By creating the class "wildlife" in your html, you are then able to reference that class in your css, which you did, and then add properties and their respective values. I am not sure what the effect of adding the image in both will do, but I imagine it could cause a conflict. What is the result of your code above? Also, whereas it is true that the ../ is for the purpose of going out of say a css folder to get back to the level at which your html file resides, what we cannot see is whether you have placed your image in a folder for images, or if it is also residing at the level of the html and css files, in which case you would not need the img/ either. You would simply need the bear.jpg.