CODEWITHSUNDEEP
javascripthtmlcssangularjs
Bing Lan
Bing Lan

Reputation: 1151

adding background image in angularjs, css not working

I seem unable to apply style in css on element after using ng-style to setup background image.

HTML:

<body id="bg" ng-controller="BgImagesListController" ng-style="selBGImg">

CSS:

#bg {
    background: center center fixed transparent;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size:contain;
}

JS:

var mlwcApp = angular.module('mlwcApp', [])
.controller('BgImagesListController', function($scope, $http) {

    $scope.selBGImg = {
        background : 'url(bgimgs/bg.jpg)'
    };
});

I used to setup background image in css and it worked. After using ng-style, the image can be shown but all other style gone. Any idea?

Upvotes: 1

Views: 1373

Answers (1)

vivid
vivid

Reputation: 1145

change background to 'background-image':'url(bgimgs/bg.jpg)'

var mlwcApp = angular.module('mlwcApp', [])
.controller('BgImagesListController', function($scope, $http) {
    $scope.selBGImg = {
        'background-image' : 'url(https://wiki.teamfortress.com/w/images/thumb/e/ec/Das_Naggenvatcher.png/250px-Das_Naggenvatcher.png)'
    };

})
[id="bg"] {
    background: center center fixed transparent;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size:contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="bg" ng-app="mlwcApp" ng-controller="BgImagesListController" ng-style="selBGImg">
    
</body>

Upvotes: 2

Related Questions