Lightning Component Framework Specialist : Boat images are not coming in BoatTile Component

Here is BoatTile component and respective CSS.

BoatTile.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="boat" type="Boat__c" default="{
                                                        'sObjectType' : 'Boat__c',
                                                        'Name' : '',
                                                        'Picture__c' : '',
                                                        'Contact__c' : ''
                                                        }"/>
    <aura:registerEvent name="selectedBoat" type="c:BoatSelect" />
    <lightning:button class="tile" >
    	<div style="{!'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innerTile">
        	<div class="lower-third">
            	<h1 class="slds-truncate">{!v.boat.Contact__r.LastName}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>
BoatTile.css
.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: ⌗FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

any suggestion on setting background-image ??