Setting an image to the page background in an angular js based app

Question

I am a newbie to AngularJS. I developed a simple currency converter app for which I would like to set a nice image background. This is my UI code:

<head>

<title></title>
</head>
<body >
<center>
    <div ng-style="{'background-image':'url(https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg)'}">
        <div class="label" ng-controller="countryMapper" style="display:inline-block">

         //Internal code here


        </div>
    </div>
</center>
<script src="Scripts/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/main.js"></script>

I am just not able to set a full background image to the app. Please tell me how to do this in detail

1) If fetching the image from a URL

2) If using a local image, saved in the project

you got it sorted?

Sajeetharan
– Sajeetharan

2016-11-07 17:50:33 +00:00
Commented Nov 7, 2016 at 17:50 — Sajeetharan
– Sajeetharan, Commented Nov 7, 2016 at 17:50

RAM · Accepted Answer · 2016-11-07 19:18:42Z

The problem appears to be that your code tries to call a controller without first calling a specified module! After defining a module and including it in the source code, the background image displays exactly as it's meant to:

<body ng-app="myapp">
<!-- ngApp needs to be here to use any controllers attached to the module! -->

  <div ng-style="{'background-image':'url(https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg)'}">
    <div class="label" ng-controller="countryMapper" style="display:inline-block">

Check out the Plunker here!

Also, just as an aside, make sure your app is tall enough to show the image in the first place; keep in mind that the first bit of the image is just white, so you wouldn't be able to see that it was there at all if the div was only a few lines long!

Sajeetharan · Accepted Answer · 2016-11-07 17:32:01Z

1

You can use the $scope variable bind the image url using the following directive,

    var app = angular.module('myApp', []);
    app.controller("countryMapper", function ($scope) {    
 $scope.url="https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg";
    });

Directive

app.directive('backgroundImage', function () {
    return function (scope, element, attrs) {
        element.css({
            'background-image': 'url(' + attrs.backgroundImage + ')',
            'background-repeat': 'no-repeat',
        });
    };
});

DEMO

edited Nov 7, 2016 at 17:32

answered Nov 7, 2016 at 17:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

Sajeetharan Over a year ago

@SoulRayder check the demo

SoulRayder Over a year ago

I tried copy pasting same code into my project, but its not showing the image

Sajeetharan Over a year ago

can i get team viewer?

SoulRayder Over a year ago

I'm afraid I don't have that installed currently.

Collectives™ on Stack Overflow

Setting an image to the page background in an angular js based app

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related