Using images as user ranks, can I use a sprite sheet?

Lone Wolf

Well-known member
I'm currently using the following code in the message_user_info template and it's working fine...

Code:
<!-- Start User Ranks -->

<xen:if is="{$user.is_admin}">
<span class="userrank"><img src="styles/flexile/xenforo/ranks/admin.png"></span>
</xen:if>
 
<xen:if is="{xen:helper ismemberof, $user, 2}">
<span class="userrank"><img src="styles/flexile/xenforo/ranks/member.png"></span>
</xen:if>
 
<!-- End User Ranks -->

However I could be using upto 2 dozen images so I was wondering how to achieve the above with a CSS Sprite sheet to reduce the number of images loading, etc.
 
Use this code:

Rich (BB code):
<img style="width:46px; height:44px; background:url(path/to/rankimage.gif) 20px 0;" src="styles/default/xenforo/clear.png" />

Per the guide linked below, the src points to a transparent image to satisfy the src requirement. Then I added inline styling to the img tag to specify the necessary CSS attributes to use a sprite image.

For reference:
http://www.w3schools.com/css/css_image_sprites.asp
 
Use this code:

Rich (BB code):
<img style="width:46px; height:44px; background:url(path/to/rankimage.gif) 20px 0;" src="styles/default/xenforo/clear.png" />

Per the guide linked below, the src points to a transparent image to satisfy the src requirement. Then I added inline styling to the img tag to specify the necessary CSS attributes to use a sprite image.

For reference:
http://www.w3schools.com/css/css_image_sprites.asp

Thanks Jake but bearing in mind I know nothing about coding, have I understand this correctly...

the width and height relate to the size of the image within the sheet and the 20px 0 relates to the location of the top left pixel within the sheet?

What's the transparent image and why is it needed?
 
Top Bottom