Why arent my sprite images showing up?

Question

I need a new pair of eyes on this code. Must have coder's blindness or something. For the life of me I can't figure out why the images aren't loading up on page.

I've been sitting here comparing this to other working code with different classes and image sprite and can't see where the issue is.

If someone wouldn't mind taking a minute or two and running over it I'd appreciate it a lot.

.480sl1, .480sl2, .480sl3, .480sl4, .480sl5, .480sl6, .480sl7, .480sl8, .480sl9, .480sl10, .480sl11, .480sl12, .480sl13
{background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/480-sl-sprite.jpg');
background-repeat: no-repeat;
width:100px;
height:166px;   
display:inline-block;



}



.480sl1 {background-position: 0px 0px;}
.480sl2 {background-position: 0px -166px;}
.480sl3 {background-position: 0px -332px;}
.480sl4 {background-position: 0px -498px;}
.480sl5 {background-position: 0px -664px;}
.480sl6 {background-position: 0px -830px;}
.480sl7 {background-position: 0px -996px;}
.480sl8 {background-position: 0px -1162px;}
.480sl9 {background-position: 0px -1328px;}
.480sl10 {background-position: 0px -1494px;}
.480sl11 {background-position: 0px -1660px;}
.480sl12 {background-position: 0px -1826px;}
.480sl13 {background-position: 0px -1992px;}

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="480sl1"></img></a></div>
<div class="top_grow11"><a href="free-480-x-800-mobile-wallpaper.htm"><img class="480sl2"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-wallpapers.htm"><img class="480sl3"></img></a></div>
<div class="top_grow11"><a href="free-480-x-800-cellphone-wallpaper.htm"><img class="480sl4"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-wallpapers.htm"><img class="480sl5"></img></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-wallpaper.htm"><img class="480sl6"></img></a></div>
<div class="top_grow11"><a href="free-480x800-mobile-backgrounds.htm"><img class="480sl7"></img></a></div><div class="top_grow11"><a href="free-mobile-480-x-800-background.htm"><img class="480sl8"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-backgrounds.htm"><img class="480sl9"></img></a></div>
<div class="top_grow11"><a href="free-cellphone-480-x-800-background.htm"><img class="480sl10"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-backgrounds.htm"><img class="480sl11"></img></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-background.htm"><img class="480sl12"></img></a></div>
<div class="top_grow11"><a href="samsung-galaxy-s-2-ii-i9100-480x800-mobile-wallpapers.htm"><img class="480sl13"></img></a></div>

Are there any error in the developer console in the browser? Also, is there a reason you are using background images and not the src attribute? The answer on this question suggests a way of deciding when to use img or a background image. http://stackoverflow.com/questions/17288500/img-vs-background-image-css-in-performance — Dhunt, Nov 16 '15 at 08:50
Down voters want to explain to the class why they down voted my question seeing that my question was solved very quickly by some one that DID understand the question. — Techagesite, Nov 16 '15 at 09:01
I did not downvote, but since you ask: Your question fits two out of three criterias for downvotes: It does not show any research effort and it is not helpful (to others, only to yourself). You could reword the question to make it more useful or at least findable by asking, for example, "Why aren't my CSS sprites visible" instead of "Another pair of eyes on my code". — Gerald Schneider, Nov 16 '15 at 09:08
@geral schneider Do explain a research effort example for this situation please. — Techagesite, Nov 16 '15 at 09:20

score 5 · Answer 1 · answered Nov 16 '15 at 08:51

5

One simple reason: your CSS / HTML classes can't start with numbers!

I changed your class names and the image immediately popped up. That's the only thing you need(ed) to do.

HTML:

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="aClassNameStartingWithaLetter"></img></a></div>

CSS:

.aClassNameStartingWithaLetter {
background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/480-sl-sprite.jpg');
background-repeat: no-repeat;
width:100px;
height:166px;   
display:inline-block;
}

.aClassNameStartingWithaLetter {background-position: 0px 0px;}

Demo: http://jsfiddle.net/uo5cah4g/1/

answered Nov 16 '15 at 08:51

Siyah

2,852
5
37
63

1

Well there you go then. Thanks for that. – Techagesite Nov 16 '15 at 08:54
No problemo. You won't forget this one now :) PS: accept the answer if it helped you so that we can remark it as solved. – Siyah Nov 16 '15 at 08:54
No i wont forget that – Techagesite Nov 16 '15 at 08:55
1

Your CSS / HTML classes can't start with numbers! ... (I cant catch this) +1 – Anant Dabhi Nov 16 '15 at 08:57

score 0 · Answer 2 · edited May 23 '17 at 12:08

Your class name is invalid

Class name rule

a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers

More

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="sl1"/></a></div>
<div class="top_grow11"><a href="free-480-x-800-mobile-wallpaper.htm"><img class="sl2"/></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-wallpapers.htm"><img class="sl3"/></a></div>
<div class="top_grow11"><a href="free-480-x-800-cellphone-wallpaper.htm"><img class="sl4"/></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-wallpapers.htm"><img class="sl5"/></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-wallpaper.htm"><img class="sl6"/></a></div>
<div class="top_grow11"><a href="free-480x800-mobile-backgrounds.htm"><img class="sl7"/></a></div>
<div class="top_grow11"><a href="free-mobile-480-x-800-background.htm"><img class="sl8"/></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-backgrounds.htm"><img class="sl9"/></a></div>
<div class="top_grow11"><a href="free-cellphone-480-x-800-background.htm"><img class="sl10"/></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-backgrounds.htm"><img class="sl11"/></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-background.htm"><img class="sl12"/></a></div>
<div class="top_grow11"><a href="samsung-galaxy-s-2-ii-i9100-480x800-mobile-wallpapers.htm"><img class="sl13"/></a></div>

.sl1,
.sl2,
.sl3,
.sl4,
.sl5,
.sl6,
.sl7,
.sl8,
.sl9,
.sl10,
.sl11,
.sl12,
.sl13 {
    background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/-sl-sprite.jpg');
    background-repeat: no-repeat;
    width: 100px;
    height: 166px;
    display: inline-block;

}

.sl1 {
    background-position: 0px 0px;
}

.sl2 {
    background-position: 0px -166px;
}

.sl3 {
    background-position: 0px -332px;
}

.sl4 {
    background-position: 0px -498px;
}

.sl5 {
    background-position: 0px -664px;
}

.sl6 {
    background-position: 0px -830px;
}

.sl7 {
    background-position: 0px -996px;
}

.sl8 {
    background-position: 0px -1162px;
}

.sl9 {
    background-position: 0px -1328px;
}

.sl10 {
    background-position: 0px -1494px;
}

.sl11 {
    background-position: 0px -1660px;
}

.sl12 {
    background-position: 0px -1826px;
}

.sl13 {
    background-position: 0px -1992px;
}

Why arent my sprite images showing up?

2 Answers2