Find solution
How to open a new ng-view inside ng-view?

How do I use a full page image background in AngularJS based web app?

  • This is what I am doing and want: I have several pages that are rendered using angular routes like: --home.html --about.html and so on All these pages reside in partials folder. The problem is that I want a separate full page background image for all  partials. My index.html: -body --header --div.ngView --footer -/body

  • Answer:

    You can do this in the following manner: Apply a controller on the body level. Create classes to apply background images for each of your pages. Eg: .home-bg { background: url(image-url);} Create a service that keeps track of which page is being displayed. Change the value of the class based on your routes. Apply ng-class on your body tag. Change the class using a function in the service. It would look something like this: app.controller('MainController', ['$scope', 'BackgroundService', function($scope, backgroundService) { $scope.bgService = backgroundService; }]); app.factory('BackgroundService', [function() { var currentBackgroundClass = 'home-bg'; return { setCurrentBg: function(class) { currentBackgroundClass = class; }, getCurrentBg: function() { return currentBackgroundClass; } }; }]); In your html use it like this: <body ng-controller='MainController' ng-class="bgService.getCurrentBg()">

Abhiroop Patel at Quora Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.