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 tuukka uosukainen
tuukka uosukainen
22,107 Points

css background image wont show

I'm experimenting with css image sprite and it wont work.

sprite.jpg is 120px X 120px.

Here's my code:

<!DOCTYPE>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Sprite</title>
            <style>
                #image {
                    background-image: url("sprite.jpg");
                    width: 120px;
                    height: 120px;
                }

            </style>
        </head>

        <body>
            <p></p>
            <div id="image"></div>
        </body>
    </html>
Joshua Holland
Joshua Holland
2,865 Points

As far as I can tell the background image css looks fine, can you post your html for the image as well?

10 Answers

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

Your code is fine. I tried the same exact code on my PC with an image of my own, and it worked perfectly.

So it must be some issue with your picture. Is it in the same directory as your html file? Is the file-name correct? Any browser issues?

If you have an issue, at least you know that your code ain't it. :)

Good luck.

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

haha, I'm good to go then!

My sprite.jpg is in the same folder as my index.html. I'm using Chrome. Maybe that's the issue. I'll try with Safari.

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Tuukka

Assuming your image file is in the same location as the html file (as no further path information has been specified).

Your code works fine but be aware that width and height rules don't resize the image but limits how much of the image you can see, so in my case I could only see the very top corner of the image which shares the same background colour as the html so I almost didn't notice it was there.

Hope that helps!

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

I'd say that at this point everything helps :)

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

I tried with background color and that worked.

So something is wrong with my image I guess.

I'll keep investigating.

Joshua Holland
Joshua Holland
2,865 Points

Have you made sure that all the code for the image are typed exactly the same? I noticed your title code has 'Sprite' capitalized which may have been done on purpose. But one accidental upper case letter could be the key.

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

I changed width and height to 60px and now it works. I can see the first square top left.

How should I move to the second image?

Thanks all for the fas replies! As a newbie it's great to get help!

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

So I'm not too sure if my suggestion helped or not but thought I'd post the code I used anyway.

Doesn't seem to be the prettiest to me though so maybe someone else can beautify it.

#image {
    width: 120px;
    height: 120px;
    background-image: url("sprite.jpg");
    background-size: 120px 120px;

Hope it helps!

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Oh crap it works!

I'm so proud at the moment :) Have it on hover and active too.

Sometimes it feels good to study web design.

Thanks again guys for your support!!

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi tuukka,

The best I can gather right now is that your 120x120 css sprite is made up of 4 60x60 images.

if that's the case then your div should be sized 60 x 60 which I think you've already done. It needs to be the size of the individual images within the sprite.

Then you can use background-position to move the larger image around so that you can see different individual images.

#image {
  background-image: url("sprite.jpg");
  width: 60px;
  height: 60px;
  background-position: right top; /* This would show the top right image assuming the image is the way I described */
}
tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Yes Jason,

Some how I managed to figure it out.

Thanks!