Images for next/prev navigation for a blog - css

Question

I am trying to get the next/prev links at the bottom of my blog to show up with just images. I have the positioning and the links set up correctly with the images that I want to use as well. The problem is though that the links are only working on the text that I used from the original code. I have the image that I want to use set up as the background of the div. I can not figure out how to make the image a link and delete the text.
Link to blog:
http://www.conutant.org/test-box/
What is have inside my PHP:
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>
<div id="homeicon"></div>
<span class="next"><?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
</div>
<?php } ?>
</div>
And the CSS
.nextprev {
height: 100px;
}
.nextprev .prev {
float: left;
height: 100px;
width:200px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
background-repeat: no-repeat;
background-position: left top;
margin-left: 19px;
}
.nextprev .next {
float: right;
height: 100px;
width:186px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
background-repeat: no-repeat;
background-position: left top;
}

Answer 1

try with :
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<div id="homeicon"></div>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>
</div>
You don't need background in your css anymore

Answer 2

Apply the background image to the anchors, not to the spans.
.prev a {
float: left;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}
.next a {
float: right;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}
You also need to set the anchors as block elements:
.prev a,
.next a {
display:block;
}
And finally use text-indent: -9999px in order to hide text.