Ion List Item Background image?

Does anyone know if it would be possible to put a background image on the anchor element that is generated from ion-list?

I currently have the following code:

<ion-item class="location-item" ng-repeat="loc in locations | orderBy:$storage.sortLoc | filter: searchQuery" type="item-text-wrap" ng-href="#/app/loc/{{loc._id}}/detail" style="background-image:url('{{loc.heroImage.url}}');">
    <div class="location-title">
      <p>{{loc.commonName}}</p>
      <span class="distance-indicator" ng-show="$storage.showDistance"><span class="digit">{{distanceFromHere(loc)}}</span><span class="unit">mi</span></span>
    </div>
    <ion-option-button ng-click="makeFavorite(loc)" ng-hide="isFavorite(loc)" class="button-favorite"><i class="icon ion-ios7-star-outline"></i></ion-option-button>
    <ion-option-button ng-click="unFavorite(loc)" ng-show="isFavorite(loc)" class="button-favorite active"><i class="icon ion-ios7-star"></i></ion-option-button>
    <ion-option-button ng-click="makeVisited(loc)" ng-hide="isVisited(loc)" class="button-visited"><i class="icon ion-ios7-checkmark-outline"></i></ion-option-button>
    <ion-option-button ng-click="unVisit(loc)" ng-show="isVisited(loc)" class="button-visited active"><i class="icon ion-ios7-checkmark"></i></ion-option-button>
    <ion-option-button ng-click="getDirections(loc)"><i class="icon ion-ios7-navigate-outline"></i></ion-option-button>
  </ion-item>
</ion-list>

But the swipe to reveal the ion-option-buttons looks very tacky because it’s applying my background image to the <ion-item> wrapper.

Ultimately this isn’t really what I want to do anyway, but I can’t seem to find a way with Ionic Framework to do what I really want to do: I’d like to be able to swipe all the way across the row and reveal the three option buttons evenly spaced out across the row.

Any help would be appreciated!

You could make a directive for this.

.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        var content = element.find('a');
        content.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});

 <ion-item back-img="{{item.bg}}"></ion-item>

That is a great idea! Thank you very much!

When I try to set the item row height for a row with a background image (using the solution described above), the background image height stays the same, leaving a lot of empty space below: http://i.stack.imgur.com/vDTTM.png

How can I have the background image fill all the available space in the item row height?

(I assume it’s because the background-image is added to ‘a’, and not the parent = list-item?)

Directive didn’t work for me as is, had to change var content = element.find('a'); to var content = element.children('div.item-content');. Thought i’d just say so, in case someones stumbles on this thread in the future. Thanks for pointing in the right direction @mhartington

hello all , am making one project in ionic in which task is taking picture through camera or choose image from list of images (in horizontal scroll bar list ) and send it to server …so here am facing one problem is how can i show on page that choose image from list…solution to choose image from list please
thanks in advance …you can see my below link for excepted output…I want such output any solution please ?
Screenshot_2018-02-22-08-58-59_1