I know, the very first question will be arising in your mind, what is CSS sprite? Have any idea! No, Okay. Today, let’s have a ride towards  CSS sprite, which is the most necessary part in order to speed your site up, Happy .

What CSS sprite is, what can we do with it and what would be the benefit of using CSS sprite? All of these parts will be cover in this post. Hope you are happy just after hearing this.

CSS Sprites in WordPress

Short Intro:

CSS sprite means a collection of images placed in one image called CSS sprite. This maybe be use in our blog with the help of using CSS codes with the suffix of {background-image: url(images/sprites.png); and then specify the image’s background-position: 0 0; }.

Oops, don’t confuse  looking at codes, it just a short intro the complete guide is right here. We’ll walk through many codes but you don’t need to be confuse because we can handle it right away. Let’s go,  so the very first question from all of you or maybe some of you is right here.

What, If don’t use CSS sprite?

If you don’t have a CSS sprite then your server gets lots of requests, I mean to say that a web page containing many images sends lots of requests to the server, to decrease those server requests, save bandwidth and in order to let your site load faster we use it.

As we know CSS sprite refer to a collection of images placed in only one image, got it! Let’s suppose, if your site uses over 10, 20, 30 and so on background images then you may not hide the outcome means the more your site have background images the more your server have requests in this way it’s not possible to complete all those requests in seconds simultaneously users of your site get bored, and be able to leave it as soon as possible.

Me, you and everyone knows that in this world no one have the time to wait. Okay leave it! Let’s see that Facebook (the biggest social network in the world although the global alexa rank of Facebook is #1) also uses CSS sprite click here to check it out.

Use CSS Sprites in WordPress

The very first benefit of using CSS sprite is that your site will load very faster. These server requests will be resolved just by using CSS sprite.

What’s spriteme? It’s a very awesome site to make CSS sprites finds background images, group them into sprites, generate sprite, make exactly CSS background-position declaration for your website, and did you know? The very great thing is that It’s out of cost  Yeah it’s correct.


1. Anyways, getting back to the work. Let’s run spriteme in your browser, on the front page of that website, you’ll see the installation process of spriteme. If you’ve installed it right in your browser, try making a sprite for your site.

2. How to make an sprite, look what I did?

I just go through my site when it get loaded completely in the browser at the moment I clicked the SpriteMe tab from Bookmarks bar. Spriteme automatically caught all the background images that used in my site, and also tells non-sprited images. The SpriteMe automatically makes sprite for your site just by clicking the tab “make sprite” for both vertical as well as horizontal.

CSS Sprites in WordPresss

3. You have successfully made an sprite for your site, the next step is to download that sprite and upload it in your WordPress theme’s root images directory (wp-content/themes/your theme/images).

4. On the same page click on Export CSS, you’ll get the CSS codes for the created sprite.

CSS Sprites in WordPresss spriteme

5. Go through your WordPress admin panel Appearance > Editor and replace the images links with the help of export CSS coding.

For example:

Looking at the image above, background-image url before is:

background-image: url(http://www.yourdomain.com/wp-content/themes/streamline/images/categories.png);

Change above URL like:

background: #fff url(images/gp_sprite.png) center left no-repeat;
background-position: -10px -10px;


background: #fff url(wp-content/themes/your theme/images/gp_sprite.png) center left no-repeat;
background-position: -10px -10px;

Keep in mind, before image URL has no background-position within CSS codes okay. But after making a sprite we’ve to increase a CSS declaration which is background-position to specify the image’s background position because in the sprite there are lots of images present to make them load clearly we use background-position declaration in the specific CSS selector.

Now what, kindly change all of the background images URLs with the help of export CSS coding. We’ve all done.