CSS sprite in liferay

I have six images, arranged in a row. I call these images one by one in theme. But it will increase the HTTPRequest value.

CSS Sprite technique is a way to reduce HTTPrequest by combining images and then adjust the position value for each image. It can be in horizontal (X-axis) or vertical (Y-axis).

Before using CSS sprite, the coding[2] for that images may be look like this;

And the CSS style looks like this;

After applying CSS sprite....
In this tutorial, I combined six images and named it as button.png.
I restructured my codes as shown below.


And the CSS style looks like this;

The output:



If your button image in vertical, just adjust the Y-axis in background-position (e.g background-position:0px, -70px).


Note: Click on image to enlarge.

1. CSS style is written in custom.css
2. Coding in this entry located in portal_normal.vm