Изменить фон на изображении нажмите

Question

У меня есть список изображений, и я хочу изменить фон div, когда я нажимаю одно из изображений. У меня есть что-то вроде этого, но он не работает:

JQuery:

$('.container-inner').find('img').click(function(){ 
      var $url = $(this).attr('src'); 

       console.log($url); 
     $('.container-outer').css({'background-image': $url}); 

}); 

HTML-:

<div class="container-outer"> 
    <div class="container-inner"> 
    <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a> 
     <a href="#"><img src="http://a.tgcdn.net/images/products/additional/large/e718_broke_something.jpg"/></a> 
     <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a> 
     <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a> 
     <a href="#"><img src="http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg"/></a> 
     <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a> 
     <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a> 

    </div> 
</div> 

Любые идеи?

Answer 1

Вы упускаете url(link here) часть CSS:

$('.container-inner').find('img').click(function(){ 
    $('.container-outer').css('background-image', 'url('+this.src+')'); 
}); 

FIDDLE

Answer 2

Вы должны изменить свою последнюю строку на:

$('.container-outer').css("background-image", "url(" +$url+ ")"); 

Кроме того, Log $ URL, чтобы увидеть, что он возвращается. Затем сравните это с тем, как устанавливается фоновое изображение.