HTML Textbook JQuery removing background image

HTML Textbook JQuery removing background image

I'm having a textbox as below:
<input type="text" name="fname" class="username" id="fname">
And I have the corresponding CSS for it:
.username {
background:#FFFFFF url(images/admin4.png) no-repeat;
width: 256px; height: 24px
}
Now when user click on this textbox, I would like to remove the image, and
when the the textbox is blur, the image showing back.
I've tried something like below:
$( document ).ready(function() {
$('#fname').focus(
function(){
$(this).css({'url' : ''});
});
but the image remains there? I've tried alert in the function, both blur
and focus seems to working fine but images just cant be remove?