How to set body attribute in css using angularjs?


Tags: javascript,jquery,html,css,angularjs

Problem :

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;"};
};


Solution :

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"};
});

    CSS Howto..

    How to include image into css file using JSF tag

    disabling stylesheets to increase the speed of showing/hiding divs

    How to make a thicker text shadow using css?

    How prevent inheriting “position: relative” CSS

    How can I render country flags as a ribbon, using CSS only?

    How do I get PHPStorm to use the correct path for CSS?

    How to “float” an absolutely positioned element div out of its container

    in slick slideshow, just want center slide to be active

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    Learning Bootstrap Thumbnails…why is that bullet showing?

    Nine divs in columns. How to design this?

    How to make this styling with css

    How to make Bootstrap sticky footer content go full page height?

    How do I trigger the popup dialog box automatically from iWebkit?

    How do I put a box around my Flot graph?

    Image title both alingn. How to make each element aligned vertically?

    website div won't stretch from left to right, how do you fix css?

    How to change CSS style of nested list items?

    Google Font API uses browser detection. How to get all font variations for font-face

    How do I center align form

    How to create a vertical line with a text in the middle

    Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

    How semantic X/HTML can save time when we will write CSS?

    how to to set chat box based on user id using css

    How to remove spacing between the top of a border and a div [closed]

    CSS - How to set margin-left dynamically with a fixed value

    How to center banner with jquery mobile?

    How to increase checkboxes size with css which work in Google Chrome?

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How to use relative referencing in CSS files