adding background image in angularjs, css not working

Question

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?

vivid · Accepted Answer · 2015-10-06 11:40:31Z

2

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>

answered Oct 6, 2015 at 11:40

vivid

1,1453 gold badges14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bing Lan Over a year ago

It works! Thank you, but why background-image works here?

vivid Over a year ago

because you are overriding the background property and here you only change background-image.

Collectives™ on Stack Overflow

adding background image in angularjs, css not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related