CODEWITHSUNDEEP
javascriptjqueryangularjs
Pallavi Sharma
Pallavi Sharma

Reputation: 655

why the background image is not set using angular?

Hi can you please tell me why my background image not set .?I need to set same image in all views ?And Can you please tell me how to show different images in different views how I can achieve this ? plunker http://plnkr.co/edit/KfY9Xo2br3AD6UOzoZlE?p=info

<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-style="{'background-image':'url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Domestic_cat_cropped.jpg/250px-Domestic_cat_cropped.jpg)'}">
   <div ng-app="app">
      <ng-view></ng-view>
    </div>
  </body>

</html>

Upvotes: 0

Views: 101

Answers (3)

V31
V31

Reputation: 7666

You bootstrapping the app after the ng-style which is incorrect. It should be like this:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-style="{'background-image':'url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Domestic_cat_cropped.jpg/250px-Domestic_cat_cropped.jpg)'}">
   <div>
      <ng-view></ng-view>
    </div>
  </body>

</html>

Working Plunkr

Upvotes: 2

pkit
pkit

Reputation: 81

You initialised the Angular application after setting ng-style!!!

Make sure to include ng-app="app" on the body tag and you should be fine.

Upvotes: 1

Zorba
Zorba

Reputation: 566

Move the ng-app="app" from div to html tag.

Upvotes: 0

Related Questions