Dynamically seting a background image using AngularJs Controller

Question

Hi I have the following code to set the background to the whole page, and it works fine the background image is showed as expected, but the chrome console show this errors

GET http://localhost:3000/assets/img/backgrounds/%7B%7Bbgimg%7D%7D 404 (Not Found)
GET http://localhost:3000/assets/img/backgrounds/ 404 (Not Found)

This error is similar when loading image with src instead of ng-src but for background I don't know any directive. here is my code

HTML:

<body background="assets/img/backgrounds/{{bgimg}}">
<div class="view-container layer">
    <div ng-view></div>
</div>

The controller

    var bgImagesList = ['01.jpg',
        '02.jpg', '03.jpg', '04.jpg',
        '05.jpg', '06.jpg', '07.jpg',
        '08.jpg', '09.jpg', '10.jpg',
        '11.jpg'];

    var changeBaclground = function () {
        $rootScope.bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];
    };

You could consider using ng-class or ng-style I believe. — Jhey
– Jhey, Commented Sep 4, 2015 at 14:48

efirvida · Accepted Answer · 2015-09-04 15:51:58Z

5

You can use ng-style for this purpose

<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}" >

Other easy way will be
html:

<body ng-style="setBackground()" >

In Controller:

var bgimg = bgImagesList[Math.floor(Math.random() * bgImagesList.length)];   

$rootScope.setBackground = function(){
    return {
            'background-image':'url(assets/img/backgrounds/' + bgimg + ')'
        }
}

edited Sep 4, 2015 at 15:51

efirvida

4,8855 gold badges51 silver badges76 bronze badges

answered Sep 4, 2015 at 14:49

Mudasser Ajaz

6,2571 gold badge28 silver badges29 bronze badges

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

5 Comments

efirvida Over a year ago

I tried this <body ng-style="{'background-image':'assets/img/backgrounds/{{bgimg}})'}"> and this <body ng-style="{'background-image':'assets/img/backgrounds/bgimg)'}"> but didn't work . I am using it correctly?

Mudasser Ajaz Over a year ago

please see my code, you need to enclose path in url()

efirvida Over a year ago

Ups sorry, but didn't work, now the resultan code is

<body ng-style="{'background-image':'url(assets/img/backgrounds/07.jpg)'}" style="background-image: url(http://localhost:3000/assets/img/backgrounds/);">

and the background is missing

Mudasser Ajaz Over a year ago

@efirvida i have edited my answer and added another way. Try that.

efirvida Over a year ago

that last works perfectly, thanks!, I edited to have the full code

Jhey · Accepted Answer · 2015-09-04 15:12:04Z

2

I'd possibly consider using ng-style for a solution.

Inside your controller when you change the background, update a style object in your $scope which is reference by ng-style of the element.

See some info about ng-style here.

UPDATE

See the following plunkr http://plnkr.co/edit/dYIQ... that shows a simple use of ng-style. When you check and uncheck the checkbox the background color will change between red and blue.

For your problem, your myStyle object could be something like;

var myStyle = {
  background: 'url(path/to/' + bgimg + ')'
}

Ideally, you won't need to create the myStyle variable each time but the example gives you a simple example of how it can be used.

Hope that helps you out!

edited Sep 4, 2015 at 15:12

answered Sep 4, 2015 at 14:50

Jhey

1,3777 silver badges10 bronze badges

4 Comments

efirvida Over a year ago

I saw the documentation but didn't figure out on who to do it

Jhey Over a year ago

I've updated my answer with a plunkr to show you what I mean. Simply check the checkbox and see the background color change between red and blue.

Jhey Over a year ago

In later updates I believe you could just do changes like myStyle.background = 'url(...)'; instead of creating the object again. This is just a simple way to show you how it works.

Jhey Over a year ago

What does your $rootScope.myStyle object look like? have you followed how I used it in the plunker?

Community · Accepted Answer · 2017-05-23 10:28:37Z

1

Use ng-style with your element, this is how to set it:

ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}"

And this is how your whole code should be:

<body ng-style="{'background-image':'url(assets/img/backgrounds/{{bgimg}})'}">
<div class="view-container layer">
    <div ng-view></div>
</div>

You can read more about it at ngStyle - directive in module ng and you will find how to use it here.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Sep 4, 2015 at 15:06

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

2 Comments

efirvida Over a year ago

as I said in other comment with this I have a resultant HTML like

<body ng-style="{'background-image':'url(assets/img/backgrounds/07.jpg)'}" style="background-image: url(http://localhost:3000/assets/img/backgrounds/);">

and now the background is missing because style="background-image: url(http://localhost:3000/assets/img/backgrounds/);" don't have the image url

cнŝdk Over a year ago

Where are your html file and image located, are they in the same folde? please show us the directory tree. I think you may use ../assets/img/backgrounds/{{bgimg}} if the assets folder and your current html file are in the same directory.

Collectives™ on Stack Overflow

Dynamically seting a background image using AngularJs Controller

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related