JSFiddle - React, Tailwind, and code Playground

by vla

HTML

<div ng-controller='ctrl'>
    <div ng-repeat="kitten in kittens" back-img="http://placekitten.com/g/{{kitten.w}}/{{kitten.h}}" >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, $timeout){
    $scope.kittens = [
        {w:250, h:300},
        {w:400, h:250},
        {w:200, h:200}
    ];
});


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