0

I am using SpriteMe for my webpage and have code below. The problem is it show full sprite image instead of single image inside it.

<div class="white_box">
     <div class="white_box_top_JS" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); border: 2px solid red; background-position: -279.5px -10px; ">
         <h2>Job Seekers</h2>
         <ul>
             <li>
                <a href="/?user_group_id=JobSeeker" class="web_des" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); background-position: -638px -6px; ">Register</a>  
            </li>
         </ul>
    </div>
</div>

I have read and followed <ul> Sprite Issue but can't get it.

http://jsfiddle.net/6TaQt/30/

Community
  • 1
  • 1
user1732217
  • 67
  • 1
  • 7

1 Answers1

0

It is best to stay away from inline style whenever possible. Additionally, the li element should receive the sprite, not the anchor. Here is a start on the relevant changes: (also in a forked fiddle )

HTML: 

      <ul>
         <li id="register">
             <a href="/?user_group_id=JobSeeker" class="web_des">Register</a>
        </li>
         <li id="post">
             <a href="/add-listing/?listing_type_id=Resume" class="web_dev">Post resumes</a>
        </li>
         <li id="find">
             <a href="/find-jobs/" class="seo" >Find jobs</a>
        </li>
         <li id="get">
             <a href="/job-alerts/?action=new" class="cms">Get jobs by email</a>
        </li>
     </ul>

CSS: 

#register { width: 40px; 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
    background-position: -1315px -6px; }

#post { width: 40px;
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png) ; 
    background-position: -1360px -6px; }

#find { width: 40px;
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); 
    background-position: -685px -5px; }

#get { width: 40px;
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); 
    background-position: -544px -6px; }
RyanFarmer
  • 46
  • 4