How can I utilize css sprites

Hi,
I want to use CSS Sprites on my site.
Is it recommended? & How can I use it ?
I want to use CSS Sprites for the following files.
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/bg-header.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/btn-send.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/bullet.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/flags/default.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/flags/french.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/flags/german.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-facebook.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-google-plus.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-pinterest.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-rss.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-twitter.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-vl.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/ico-youtube.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/icon_hot.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/icon_search.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/logo-nike.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/product_rating_blank_star.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/product_rating_full_star.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/images/sep-vdot.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmmegamenu/images/arrow.gif
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmmegamenu/images/bg-bullet-right.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmproductsslider/images/re-left.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmproductsslider/images/re-right.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmslideshow/images/ajax-loader.gif
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmslideshow/images/thumbs-handles.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmslideshow/images/thumbs-handles_active.png
    http://ultimatesports.in/skin/frontend/default/jm_sporty/joomlart/jmtabs/themes/sporty/arrow_tags_active.png
So what file I should edit.

4 answers

Profile photo of Admin Staff -30640.00 $tone May 26, 2016
Public

Hi Chaitanya Badhe, CSS Sprites is handy to optimize page loading. Yet it will need an extra amount of work to apply to the Sporty theme, and it’s hard to provide you detailed guide here. Please consider to hire a developer to help you on this, or you can use our custom service
Regards,
An Nguyen
 

#1
Profile photo of Chaitanya Badhe 510.00 $tone June 1, 2016
Public

Hi Nguyen,
I can’t afford to buy your service at this time. But Would love to work with you in future for customization.
My last developer robbed me for 80K INR ie. $1200 So currently I have to do everything my self.
Regards,
 

#2
Profile photo of Ziven Staff 100280.00 $tone June 3, 2016
Public

Hi There,
You can use like this:

#ja-header {
background-image:url(sprite.png);
background-repeat: repeat-x;
background-position: 0px -72px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
min-height: 102px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
position: relative;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
z-index: 999;
}

Please try again.
 
Best Regards,
Ziven.

#4

Please login or Register to Submit Answer

Written By

Comments