How to: Use CSS Sprites in WordPress Blog?

If have checked your website’s page speed and come across “Combine images using CSS sprites” speed issue then I assure you that you are on the right page. In this article, I’ve described everything about CSS sprites.

CSS sprite can really make your website faster if you use it on your website rather than having multiple small background images. CSS sprite is necessary part in order to speed up your site.

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 article.

CSS Sprites in WordPress

CSS sprite means a collection of small background 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 #2) also use css sprites:

Css spite of Facebook

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(;

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.

Similar Posts


  1. I have same problem. I’ve checked this site on google pagespeed insight. Your site still has problem with CSS sprites. I’m not sure to do your advice. But, thanks for your explanation. 🙂

  2. I am having the very came problem. Using GT Metrix it is telling me to combine sprites. I am using WO Social Booster plugin and that seems to be the big problem. I am getting an “F” at 33% for page speed grade! That’s terrible, any solutions to this problem that work 100%? Thanks 🙂

  3. i have a question.. in the theme i used for this site it is layout.css that has what export CSS told me to input.. however, when i look at it – shows like this…

    .menu-header-left {
    background: url(“../images/menu-bg-left.png”) 0 0 no-repeat;
    width: 5px;
    height: 61px;
    position: absolute;
    top: 0;
    left: -5px;

    it doesn’t have the full url, i.e. (from SpriteMe export CSS):
    .menu-header-left {
    background-image: url(“”);
    background-image: url(“”);
    background-position: -10px -10px;

    so my question is.. can i just replace background: url(“../images/menu-bg-left.png”) 0 0 no-repeat; with this:

    background: url(“../images/spriteme1.png”) -10px -10px no-repeat;

    or do i have to use the full url and do i have to do anything like adjust/remove width, height, etc

    1. Hi @MaxW, Hope you doing well… And by the way the answer of your question is:

      Either upload the sprite image on your server in the theme’s directory of or simply use full url like this also neglect the first URL.

      .menu-header-left {
      background-image: url(“”);
      // Remove this background-image selector.
      background-image: url(“”); background-position: -10px -10px;
      1. Muhammad,

        i have already upload the sprite to images

        so even though in my cpanel when i go into layout.css it doesn’t show the full url, i.e. it shows like this

        background-image: url(……/images/xmenu-bg-left.png)

        should i just replace the xmenu-bg.left.png with spriteme1.png??? or do i put in the full url (

        that was what i meant..

        1. Hey @MaxW,

          Yes you can replace the file name (spriteme1.png) in the css file if you think that the file (xmenu-bg-left.png)is also available in the same directory where yours spriteme1.png. It’s that simple man.

    1. Hi Andres, I mean to say that as we just created a sprite and you can see a button in the spriteme tab Export CSS by clicking the tab Spriteme will create a coding the sprite image that you can directly replace in the style.css file…

  4. Hello Muhammad,

    Should I run spriteme on the website homepage? or also in on internal urls?
    Cos if I run it on homepage it gives me one sprite, but if I run it on internal pages, it gives me another.

    If I have to run it on both homepage and internal, how do I post the link, since both call spritme1.png?

    1. Hi Andress,
      By the way, if you are having different images when running the spriteme on homepage and internal post url then don’t keep the same name while uploading both of these sprite images on the server but all the difference will be the background-position css selector. Hope you understand.

Leave a Reply

Your email address will not be published. Required fields are marked *