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

Jessica Gremillion
Jessica Gremillion
337 Points
Posted by Jessica Gremillion
Jessica Gremillion
337 Points

:before background-image not showing up

For the life of me I can't figure out why this is not working:

.Article_HeaderPanel h1:before {
    content: 'Hihi';
    background-image: url(images/dpwhite-small.png);
    height: 200px;
    width: 200px;
    float: left;
    position: absolute;
    top: -17px;
    left: -81px;
    border: 2px solid yellow;
    display: block;
    background-color: pink;
}

Looks like: http://i.gyazo.com/57e0ca44c35ee5e043d7392b8c2ff5bb.png

I'm just using test styling so I can more easily see what's going on. To make sure that the image link was correct I copied the path from another place where I know it works. Here, the background color and border show up but no background image. I have tried all sorts of things, adjusting the float, positioning, z-indexes, display types, etc etc. I can't figure it out!

Ideally it would just show the transparent image before the header text. That wasn't working so I added a border and background color and lots of extra space to see what was going on. It looks like it's laying out properly, but the image is just not showing up. Even if I remove the background color it's not there. I have tried using other images that I know work and no dice. Rawr.

11 Answers

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

I figured it out!

The problem was, apparently, due to me trying to make the changes via chrome's Inspector. Even though I've done it before without problem, perhaps the pseudo element aspect of it made it tweak out? Who knows. But, once I put the new selector on the live page and then adjusted it from there, it worked. Yay!

Thanks for your assistance, carman =)

Carman A
Carman A
7,672 Points

Glad you got it working.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Try adding a set of ' around your image path.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Post your code to codpen

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

I tried to embed it but it didn't like that so much.. here's this link: [redacted]

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Your code seem ok. I just pasted in a background image (After adding html) and it worked. So it's most likely your file pathway.

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

That's what I thought at first, but I've tried switching it out for file pathways that I know are currently working and that didn't do anything.

Carman A
Carman A
7,672 Points

I noticed your class was capitalized in the beginning of each word. Is the class of your div the same as your selector? Try pasting in this link http://www.hd-wallpaper.images-fonds.com/modules/mg3/albums/Art_Digital_Wallpaper_HD/Abstract/Abstract_wallpaper_HD_0029.jpg if it doesn't work than it's your selector.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Well markdown isn't working for me right now so i cant show the code.

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

That link worked!

So it has to be the path. Or that chrome inspector isn't working with it so well (that's how I am making the changes right now). But the same exact path works elsewhere in the stylesheet. Bah!

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Add your html to codepen.

Jessica Gremillion
Jessica Gremillion
337 Points
Jessica Gremillion
Jessica Gremillion
337 Points

done!

Also, uhhh.. yeah I don't have much control over the HTML of that. I'm just trying to spruce up the CSS a bit for the main content area.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Well since the link is working that means it is most likely the pathway and not a selector. Could is your img folder outside of the folder your html is in? For example if you had a folder called webiste, and inside you had 2 folders img, and contact and you wanted an image out of img for contact.html instead of img/pic.svg you'd have ../img/pic.svg. The ../ is telling the browser to go up a directory and look for it in the folder named website. Leaving out the ../ would tell it to look for the folder in the contact directory but since a folder named img doesn't exist( in the folder named contact) you won't have your image.