JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<div ng-controller='ctrl'>
    <div back-img="http://placekitten.com/g/250/300" >Hello there</div>
    <div back-img="http://placekitten.com/g/400/250" >Hello there</div>
    <div back-img="http://placekitten.com/g/200/200" >Hello there</div>
</div>

CSS

div[back-img]{
    width: 100px;
    height: 100px;
    color: #fff;
}

JavaScript

var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
});


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