icon before username by css.

[Doublecrosser]

Hi Guyz , i want to add an icon before some specific usergroup, like this
But I want to add this through css, I have the css code , But i can't use it.
Here is the css code. i m using vB4.x

.ra
{
	background:no-repeat center left;
	padding-left:13px;
}
.shoutbox_thread .ra
{
	background:none !important;
	padding-left:0 !important;
}
.bigusername .ra
{
	padding-left:18px;
}
a:hover .ra
{
	text-decoration:none;
}

.r-own{color:#ff0000;}
.r-ad{color:#ff0000;}
.r-sm{color:#088A4B;}
.r-sec{color:#0080FF;}

/* Owner */
.alt2 .r-own,
.alt1 .r-own,
.alt1Active .r-own
{
	padding-left:16px;
}
.alt1 .r-own,
.alt2 .r-own,
.alt1Active .r-own{
	background-image:url(images/ranks/r-own1.gif);
}
.bigusername .r-own{
	background-image:url(images/ranks/r-own2.gif);
	padding-left:22px;
}

/* Administrator */
.alt1 .r-ad,
.alt2 .r-ad,
.alt1Active .r-ad{
	background-image:url(images/ranks/r-ad1.gif);
}
.bigusername .r-ad{
	background-image:url(images/ranks/r-ad2.gif);
}

/* Super Moderator */
.alt1 .r-sm,
.alt2 .r-sm,
.alt1Active .r-sm{
	background-image:url(images/ranks/r-sm1.gif);
}
.bigusername .r-sm{
	background-image:url(images/ranks/r-sm2.gif);
}

/* Sectional Moderator */
.alt1 .r-sec,
.alt2 .r-sec,
.alt1Active .r-sec{
	background-image:url(images/ranks/r-sec1.gif);
}
.bigusername .r-sec{
	background-image:url(images/ranks/r-sec2.gif);
}

So can any one help me in doing this.
I've tried this by adding <div> code in HTML markup, But this ain't working.
Any Help will be appreciated (:
Thanks~