:hover picture swap isn't working - css

Question

What am I doing wrong? No picture is showing up at all. :-/ (fyi I cut off the bottom of the code, the tags are all completed I promise)
On all the tutorials I looked at they did this very thing and it showed the whole picture. But when I do it it doesn't show anything. If I type text inside the a href tags it shows part of the picture behind the text, but nothing otherwise.
CSS:
body {
background-color: #ebf4f7;
background-image: url(bg.png);
background-repeat: repeat-x;
}
#mainnav {
position: relative;
top: -9px;
left: -2px;
width: auto;
padding-right: 0%;
padding-left: 0%;
}
.profilebutton {
background-image: url(button%20profile.png);
background-position: 0px 0px;
height: 71px;
width: 113px;
}
.profilebutton:hover {
background-image: url(button%20profile.png);
background-position: 0px 100%;
height: 71px;
width: 113px;
}
HTML:
<nav id="mainnav">

Answer 1

<a> is an inline element, so you have to give the property display: block; to your <a> element if you aren't going to add any text: Fiddle
.profilebutton {
display:block;
background-image: url('http://placekitten.com/300/303');
background-position: 0px 100%;
height: 71px;
width: 113px;
}
body {
background-color: #ebf4f7;
background-image: url('http://placekitten.com/300/301');
background-repeat: repeat-x;
}
#mainnav {
position: relative;
top: -9px;
left: -2px;
width: auto;
padding-right: 0%;
padding-left: 0%;
}
.profilebutton {
display:block;
background-image: url('http://placekitten.com/300/302');
background-position: 0px 0px;
height: 71px;
width: 113px;
}
.profilebutton:hover {
display:block;
background-image: url('http://placekitten.com/300/303');
background-position: 0px 100%;
height: 71px;
width: 113px;
}
<nav id="mainnav">
nbvnbvnchdfg