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

General Discussion

Andrew Hoskins
Andrew Hoskins
4,888 Points
Posted by Andrew Hoskins
Andrew Hoskins
4,888 Points

My background image won't show

I am attempting to load a background image through my style sheet. I know the style sheet is properly set up as I have tested it by changing the background-color, and that worked fine. However, when I try to load an image, nothing happens. I have confirmed that the image is in the correct folder by adding the image with the <img> tag. It just won't work with background-image.

Here is the html portion:

<header>
  <div id="logo">
    <p>insert banner here</p>
  </div>
</header>

here is the css:

logo {

background-image: url('img/bbb-logo.png'); }

for some reason, the hash tag in front of the word logo is not showing on this post - I do have the ID selector correct on my style sheet.

3 Answers

Dean Hollstrom
Dean Hollstrom
9,445 Points
Dean Hollstrom
Dean Hollstrom
9,445 Points

hi Andrew,

What does your folder tree look like? Im assuming you have a root folder containing your index.html, then separate folders for images, css, js etc within the root folder?

If that is the case then your css path should read ('../img/bbb-logo.png'), as at the moment you are looking for a folder that doesnt exist. Using ../img sets the location back to the root folder and then looks into the img folder, whereas leaving off the ../ prefix will actually be looking into (css/img/bbb.png). Rule of thumb is to use /img within html files, as the html is the root of the file structure, but for links within css, or anything contained in a folder above the root, always use ../ to prefix the path and set the root location.

Hope this helps

Andrew Hoskins
Andrew Hoskins
4,888 Points
Andrew Hoskins
Andrew Hoskins
4,888 Points

that resolved it, thanks!

Ronny Gudvangen
Ronny Gudvangen
4,685 Points
Ronny Gudvangen
Ronny Gudvangen
4,685 Points

Looks like your div is missing width and height? When using background images on block elements lika a div, the div will not scale to the size of your background image, and may therefor not show (even though it's there).

When putting more content into the div, it will get larger, but to test it just apply some width and height (especially height) to the div.

#logo { background-image: url('img/bbb-logo.png'); width: 500px; height: 500px; }

Dean Hollstrom
Dean Hollstrom
9,445 Points
Dean Hollstrom
Dean Hollstrom
9,445 Points

No problem Andrew, glad I could help :)