Как я могу установить фоновое изображение динамически?

Question

У меня есть div на моей странице с class="post-first", в этом div есть несколько изображений, которые я не знаю, какими они могут быть!! Я просто хочу, чтобы при наведении указателя мыши на этот элемент отображалось первое изображение на фоне. Ниже показано, что я сделал. Нет ответа!! Спасибо за помощь.

$(document).ready(function(e) {
    $('.post-first').mouseover(function(){
  var a=$('img')[0].src;
  alert(a);
  $(this).css('background-image','url(a)');
  $(this).css('background-color','#F00')
  })
});

.post-first{
 background-color:#039;
 display:inline-block;
 height:13em;
 margin-left:4px;
 padding:4px
}
div.post-first img{
 opacity:0
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="post-first">
<h3>[cb:post_title]</h3><br />
[cb:post_body1]
<img src="http://ts1.mm.bing.net/th?id=HN.607986701601669353&pid=1.7"/>
</div>

Answer 1

Вам необходимо объединить значение переменной, оно в настоящее время оценивается как строка и отображается как:

background-image: url("a")

измените это на это:

$(this).css('background-image', "url('"+a+"')");

FIDDLE:

http://jsfiddle.net/wps7bn5s/