Adding full page background to a single view in Angular JS

Question

I need to add a fullscreen CSS background to a single view in my app. I tried to achieve this by adding a class to the body however this remains in the cache and remains on the body when switching view.

I'm having this issue because my <div ng-view=""></div> is within the <body> so I cannot easily add a fullscreen BG from within the view.

Possible duplicate of Changing body background color with angularjs. — buzzsaw
– buzzsaw, Commented Oct 18, 2015 at 20:12
So many ways to do this ... directive, class on template, ng-class on ng-view — charlietfl
– charlietfl, Commented Oct 18, 2015 at 20:19

Taylorsuk · Accepted Answer · 2015-10-18 21:00:37Z

1

For a very quick simple answer this is what I did.

applied conditional class to ng-view

index.html

ng-class="{'homebg' : home}"

style.scss

.homebg { height: 100%; background-image: url('../images/home-bg.jpg'); background-size: cover; background-position: center center; }

Controller.js

$scope.home = true;

answered Oct 18, 2015 at 21:00

Taylorsuk

1,4591 gold badge18 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Adding full page background to a single view in Angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related