Photoshop Question posted in
The official user guide can be found here.

How to use a CSS image sprite (not working) – Photoshop

I have a few list items on a website that will all contain a background image. As it’s more efficient it’s necessary to use a sprite. I have generated my sprite online as you can see here:

http://i60.tinypic.com/2vm8vbt.png

The CSS for the sprite is:

 .sprite-app{ background-position: 0 0; width: 100px; height: 103px; } 
.sprite-badge{ background-position: 0 -153px; width: 30px; height: 30px; } 
.sprite-badge2x{ background-position: 0 -233px; width: 60px; height: 60px; } 
.sprite-blog{ background-position: 0 -343px; width: 100px; height: 100px; } 
.sprite-google{ background-position: 0 -493px; width: 100px; height: 100px; } 
.sprite-googleplus{ background-position: 0 -643px; width: 100px; height: 100px; } 
.sprite-linkedin{ background-position: 0 -793px; width: 100px; height: 100px; } 
.sprite-photoshop{ background-position: 0 -943px; width: 100px; height: 103px; } 
.sprite-vkontakte{ background-position: 0 -1096px; width: 100px; height: 100px; }

The HTML for my apps list is:

<ul class = "apps">

<li class = "App" id = "app">
    <div class = "icon"><img src="appspics/app.png"/></div>
    <div class = "badge">2</div>
    <div class = "caption">App</div>
</li>


<li class = "App" id = "linkedin">
    <div class = "icon"></div>
    <div class = "caption">LinkedIn</div>
</li>

<li class = "App" id="google">
    <div class = "icon"></div>
    <div class = "badge">2</div>
    <div class = "caption">Google</div>
</li>

<li class = "App" id="googleplus">
    <div class = "icon"></div>
    <div class = "badge">5</div>
    <div class = "caption">Google+</div>
</li>

<li class = "App" id = "vkontakte">
    <div class = "icon"></div>
    <div class = "caption">Vkontakte</div>
</li>


<li class = "App" id = "photoshop">
    <div class = "icon"></div>
    <div class = "caption">Photoshop</div>
</li>


<li class = "App" id = "blog">
    <div class = "icon"></div>
    <div class = "badge">15</div>
    <div class = "caption">Blog</div>
</li>

As you can see each list item has an id. I want to use that to add the background as the relevant section of the sprite in css.

a working example of this would be very helpful because I cannot do the final step do display my sprite.

EDIT EDIT EDIT:

This is my current CSS, still not getting a result. It’s not displaying an image:

.App{
    background-image: url(appspics/sprite.png);
    background-repeat: no-repeat;
    border-radius: 0px;
    width: 120px;
    height: 120px;
    float: left;
    background-color: red;
}

#app{
    background-position: 0 -173px;
}

.sprite-app{ background-position: 0 0; width: 100px; height: 103px; } 
.sprite-badge{ background-position: 0 -153px; width: 30px; height: 30px; } 
.sprite-badge2x{ background-position: 0 -233px; width: 60px; height: 60px; } 
.sprite-blog{ background-position: 0 -343px; width: 100px; height: 100px; } 
.sprite-google{ background-position: 0 -493px; width: 100px; height: 100px; } 
.sprite-googleplus{ background-position: 0 -643px; width: 100px; height: 100px; } 
.sprite-linkedin{ background-position: 0 -793px; width: 100px; height: 100px; } 
.sprite-photoshop{ background-position: 0 -943px; width: 100px; height: 103px; } 
.sprite-vkontakte{ background-position: 0 -1096px; width: 100px; height: 100px; }

Those solutions are not working for me

Tags:

2

Answers


  1. 0

    Add the background-image representing your sprite to each of your list-items so the background-position knows what to refer to…

    Also don’t directly apply your sprite generated classes to your list-items unless you want your page to break.

    Do it this way:

    li:before{
    background-image: url("my_sprite.png");
    background-repeat: no-repeat;
    content: " ";
    display: inline-block;
}

li#linkedin:before{
    background-position: 0 -793px;
    width: 100px;
    height: 100px;
}
    Login or Signup to reply.
  2. 0 
    Make a class with common name "class_one"

.class_one{
background-image: url("my_sprite.png");
background-repeat: no-repeat;
display: inline-block;
width: 100px;
}

And to every LI TAG where you want to set the background-image use the property 
BACKGROUND-POSITION and set according to your layout.

BY MAYANK GROVER (http://mayank-grover.me)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search