I'm setting the background image of a page using :
body {
background: url(.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
I would like to read a property from a scoped variable in my controller that looks like this:
$scope.image=".jpg"
How can I set this css body attribute from within my .html page ? In jQuery I could .css(). Can I do something similar using angulalJs? .templates.css-styling doesn't seem to detail this ?
I'm trying this fiddle but does not work :
/
fiddle code :
<body ng-style="getBodyStyle()">
</body>
$scope.getBodyStyle = function () {
return {background: "url(.jpg) no-repeat center center fixed;"};
};
I'm setting the background image of a page using :
body {
background: url(http://momentumbooks..au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
I would like to read a property from a scoped variable in my controller that looks like this:
$scope.image="http://momentumbooks..au/wp-content/uploads/2013/06/space.jpg"
How can I set this css body attribute from within my .html page ? In jQuery I could .css(). Can I do something similar using angulalJs? http://docs.angularjs/guide/dev_guide.templates.css-styling doesn't seem to detail this ?
I'm trying this fiddle but does not work :
http://jsfiddle/U3pVM/3015/
fiddle code :
<body ng-style="getBodyStyle()">
</body>
$scope.getBodyStyle = function () {
return {background: "url(http://momentumbooks..au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed;"};
};
-
Can you use regular old js?
document.body.style.background = url(variable);ordocument.body.style.backgroundImage = url(variable);– brouxhaha Commented Feb 14, 2014 at 23:47 -
1
@brouxhaha: Unless you have a function called
urldefined that returns the proper syntax, you might want to add appropriate quotes … – C3roe Commented Feb 14, 2014 at 23:50 -
@CBroe, yep, good point.
= 'url(' + variable + ')';– brouxhaha Commented Feb 15, 2014 at 0:56
3 Answers
Reset to default 3You need an app & controller before you can do anything- your JSFiddle is failing because you've got no controller, and you never define $scope.
You can create a $scope variable called $scope.bodyStyle in a controller, like this:
app.controller('MainCtrl', function($scope) {
$scope.bodyStyle = {background: "url(http://momentumbooks..au/wp- content/uploads/2013/06/space.jpg) no-repeat center center fixed"};
});
And then register the app & the controller in the mark-up like this:
<html ng-app="plunker">
<body ng-controller="MainCtrl" ng-style="bodyStyle">
Demo text
</body>
</html>
I made a Plunkr showing the whole app, because JSFiddle is a pain with Angular.
Angular needs to start with a lot more pieces working together than regular JS or JQuery- it can be confusing when you get started, so I remend starting out with the AngularJS seed app.
You mention that you want to get the background image from a $scope variable. You could do that like this:
app.controller('MainCtrl', function($scope) {
$scope.image="http://momentumbooks..au/wp-content/uploads/2013/06/space.jpg";
$scope.bodyStyle = {background: "url(" + $scope.image + ") no-repeat center center fixed"};
});
You can do something like:
<body ng-style="getBodyStyle()">`
and
$scope.getBodyStyle = function () {
return {background: myData};
};
Actually, what I did is call API to return image URL in state resolve:
resolve: {
'image': ['$http', function($http) {
return $http.get('/api/image');
}]
}
The API returns JSON:
res.json({url: 'someUrl'});
Then you inject that to controller and in controller just call:
angular.element('body').css('background-image', 'url(\'' + image.data.url + '\')');
This seems clean to me as it does not need to inject $scope into controller which became a no-no recently.