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

Posted by Ladna Meke
Ladna Meke
5,752 Points

Cannot set Background Image

Good day,

I am trying to set background image on a div section, however, the image isn't loading on the html when I refresh.

Here's my html:

              <section>
            <div id="section-one">
                <p>Post a Job</p>
                <li>Post your job for free.</li>
                <li>It takes less than 60 second.</li>
                <li>View profiles of 1000s of jobseekers</li>
                <li>Detail of jobseeker are verified</li>
            </div>
               </section>

and the CSS:

#section-one {
    height: 50%;
    color: #335500;
    background-image: #f2f2f2 url("img/faces.png");

}```

2 Answers

Ashley Mullins
Ashley Mullins
12,544 Points

Ahh I think I see the other problem! You are using "background-image" to set both a default color AND and image. Background-image itself only takes one value. You want to use the shorthand version which is just "background." 

background: #f2f2f2 url("../img/faces.png");

I think then we should have the issue resolved. It's always something small that's overlooked. lol.

Ladna Meke
Ladna Meke
5,752 Points

[EDIT]

Thanks, it's working now. I used the wrong picture extension

Ashley Mullins
Ashley Mullins
12,544 Points

Perfect! Glad you got your code working! =D

Ashley Mullins
Ashley Mullins
12,544 Points
Ashley Mullins
Ashley Mullins
12,544 Points

I'm pretty sure this is a very simple fix

You are trying to set background image from within the css file which means you are currently working in your css folder. Your img folder should be located in your top level in the main project folder and is not actually located within the css folder, so your css doesn't know where to find it. Using the slash (/) denotes moving down a level and there is no img folder to move down to from the css folder.

All you have to do is jump out of your css folder first to move up to the main level so you can then jump into your img folder. The way to move up a level is with two dots (..).

So you have this 

background-image: #f2f2f2 url("img/faces.png");

But what you REALLY need is this

background-image: #f2f2f2 url("../img/faces.png");

Hope that helps resolve your issue! =D

Ladna Meke
Ladna Meke
5,752 Points

Thanks Ashley, I was laughing myself for missing that "simple fix".

However, it still didn't work.