Can't get my image to show - html

Question

I am having an issue with a page I'm building. I have a Js cycle with some outside-div-contained controls and the arrow_back class will show the hover state, but it won't show the normal state. The exact same code works for the arrow_forward button (including native & hover states.) Here is the css for it:
.arrow_back{
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
.arrow_forward{
background:url(../images/arrow_forward.png) no-repeat;
width:42px;
height:42px;
position:relative;
top:-84px;
right:-637px;
z-index:9999;
}
.arrow_forward:hover{
background:url(../images/arrow_forward_hover.png) no-repeat;
}
and the html:
<div class="image">
<div class="slideshow">
<img src="images/inside/cycle1.jpg" />
<img src="images/inside/cycle2.jpg" />
<img src="images/inside/cycle3.jpg" />
</div>
</div>
<div class="controls">
<img src="images/arrow_back.png" width="42" height="42" class="arrow_back" />
<img src="images/arrow_blank.png" class="arrow_forward" />
</div>
If anybody could offer some advice. I've been staring at code all week so far, and my brain is a bit toasted. It's probably something very obvious I just need fresh eyes on.

Answer 1

You're missing the background image for the arrow_back class.
.arrow_back{
background:url(../image/arrow_back.png) no-repeat;
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
Also, I removed the javascript tag since this doesn't really have anything to do with javascript.