Specific background cover issue (in an accordian)

Question

Ive used background-size:cover / contain before and thought i understood how background sizing/styling worked, but apparently not. I'm having trouble getting the background images of the accordian in the fiddle link below to cooperate. I'm just looking to fit the images to the 600px width without stretching, any help would be greatly appreciated. <3

http://jsfiddle.net/BMvt8/

.accordian li:first-child {
   width:600px;
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/

.accordian ul li:hover {
  width: 600px;
  height: 320px;
  background-size:cover;
  }

.accordian li img {
    display: block;
    width:600px;
    height:320px;
    background-size:cover;
}

Answer 1

Background size does not work on an image tag. It works for example on a div. What you need is to add the image as a background-image of a div and then apply background-size: cover.

See this fiddle: http://jsfiddle.net/BMvt8/2/

I have created a div with the class image and used it instead of the img tag:

<div class="image" style="background-image: url(http://i.imgur.com/iZcbLKf.jpg); background-size: cover"/>

And added to the css:

.image {
    height: 320px;
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.image_title {
    z-index: 3;
}

The z-index is needed to put the image title on top of the image of the dog.

Answer 2

Replace img elements by div elements in this way:

<div style="backgrond-image:url('http://url.to/your/image.png')"></div>