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 Cody Britson
Cody Britson
1,802 Points

Background is invisible

Hey, so I've been going through the CSS foundations deepdive and when I went to experiment with images in the background property the image did not appear.

this is my html script:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/main.css">  
</head>
<body>
  <div class="logo-img"></div>  
</body>
</html>

this is my css script:

html {
  background: #999;
}

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

I included the html element in the css to make sure that the link from the html was working. Indeed, there is a grey background, but no image. Any ideas?

Thanks for any and all help.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Cody,

The path in your css file is relative to where that css file is. So assuming you have your "css" and "img" folder on the same level then you need to go up a folder first then down into the "img" folder.

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

See if that is what your problem was.

Cody Britson
Cody Britson
1,802 Points

Thanks :D

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

Is your .logo-img an empty DIV element? If yes, you need to give him a fix width and height.

Cody Britson
Cody Britson
1,802 Points

It is an empty div element. I changed the css to this:

.logo-img { width: 50px; height: 50px; background: url('img/logo.png'); }

still nothing shows up.

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

don't use background, you need to use background-image

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