1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to use CSS sprite image?

Discussion in 'Blogging' started by aspe_heat, Nov 14, 2013.

  1. aspe_heat

    aspe_heat Power Member

    Joined:
    Oct 7, 2010
    Messages:
    799
    Likes Received:
    595
    Gender:
    Male
    I want to increase the speed of my website and I just created a CSS sprite image. I received an image file, which I uploaded to the host and I received CSS code.

    However...I don't know where to put the code. I pasted it into my theme's custom CSS area and the website speed test still shows that there is no sprite image. I also pasted it into theme's style.css and no change.

    What should I do?
    Thanks!
     
  2. Dhruv11

    Dhruv11 Newbie

    Joined:
    Oct 21, 2012
    Messages:
    33
    Likes Received:
    12
    So you got a CSS image sprite and want to use it for icons or what ?
    Make sure you are calling the ID/Class of the sprite image wherever applicable in HTML.
     
  3. Game On

    Game On Regular Member

    Joined:
    Aug 31, 2013
    Messages:
    355
    Likes Received:
    32

    Hi,

    Use this code in Source page(index page)

    <div id="logo"> </div>


    Use this code in style.css

    #logo{

    ..... insert your css spirit image code here ....

    }


    if you want to know more about this just PM me..



    All the Best...
     
    • Thanks Thanks x 2
  4. back2form

    back2form Jr. VIP Jr. VIP Premium Member

    Joined:
    Jul 15, 2012
    Messages:
    2,682
    Likes Received:
    1,203
    Gender:
    Male
    Location:
    in front of imac
    I hope, this will be very useful - Not only for OP, but also everyone who looking for an answer!

     
  5. blackhatdamo

    blackhatdamo Registered Member

    Joined:
    Apr 6, 2012
    Messages:
    86
    Likes Received:
    27
    Location:
    A dark place
    If you have the original un-optimized site (full images / no sprite ) then go to spriteme.org
    it converts your images into sprites and generates the code for you