current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm setting the background image of a page using : 

body {
    background: url(http://momentumbooks.com.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.com.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.org/guide/dev_guide.templates.css-styling doesn't seem to detail this ?

I'm trying this fiddle but does not work :

http://jsfiddle.net/U3pVM/3015/

fiddle code : 

<body ng-style="getBodyStyle()">
</body>

$scope.getBodyStyle = function () {
    return {background: "url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed;"};
};
share|improve this question
    
Can you use regular old js? document.body.style.background = url(variable); or document.body.style.backgroundImage = url(variable); –  brouxhaha Feb 14 at 23:47
1  
@brouxhaha: Unless you have a function called url defined that returns the proper syntax, you might want to add appropriate quotes … –  CBroe Feb 14 at 23:50
    
@CBroe, yep, good point. = 'url(' + variable + ')'; –  brouxhaha Feb 15 at 0:56
add comment

2 Answers

up vote 1 down vote accepted

You 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.com.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 recommend 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.com.au/wp-content/uploads/2013/06/space.jpg";
  $scope.bodyStyle = {background: "url(" + $scope.image + ") no-repeat center center fixed"};
});
share|improve this answer
add comment
up vote 1 down vote

You can do something like:

<body ng-style="getBodyStyle()">`

and

$scope.getBodyStyle = function () {
    return {background: myData};
};
share|improve this answer
    
I've tried your code in a fiddle but does not work? Please see question update –  blue-sky Feb 15 at 0:44
    
It seems like you don't understand the basics of angular. You need a controller. –  Jim Cote Feb 15 at 2:30
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.