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:
    798
    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:
    33
    Occupation:
    Web Designer & Developer

    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

    Joined:
    Jul 15, 2012
    Messages:
    3,759
    Likes Received:
    2,264
    Gender:
    Male
    Occupation:
    Searching..
    Location:
    in front of BHW
    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