Assign background image url to a div within a template

I have a function, drawPlaceDetails that assigns values to a html template. getPhotoURL() function returns a url link to the image. I need to assign this url to background-image property. All I get is an empty div with no image. I have validated the url's by printing them to the console and they seem to open up an image.

The template code and function is as follows:

<script type="text/html" id="places-template">
  <li>   
  <div class="placesCard">   
    <div id= "places-name" class="places-name">${name}</div>
    <div id= "places-img" style="height:40px;width:40px; border:1px black solid"></div>
    <div id="places-address" class="places-address">${formatted_address}</div> 
  </div>  
</li> 

function drawPlaceDetails(results){
 $("#places-list").append("<ul></ul>");
 for(var i=0; i<results.length; i++){
 var result = results[i];
 console.log(result);  
 var photo = getPhotoURL(result.photos);    
 $("#places-template").tmpl(result).find("#places-img")[0].style.backgroundImage = "url('" + photo + "')";
 $("#places-template").tmpl(result).appendTo( "ul" );
 }
}

function getPhotoURL(photos){ 
  if(photos){
  return photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35});     
}