title: angularjs background issues. large gap between background and footer. Image resizing doesn't change anything
body: <p>Hi I'm trying to set a background image for an angularjs website.  I've followed quite a few tutorials/examples.  They do work.  However I want my background image to be set in the bottom of the page above the footer behind a view <strong>without affecting the view that's on top.</strong>   Some suggestions haven't been helpful.</p>
  
  <p><strong>The main culprit is this gap here</strong>..which is preventing the background from going to the bottom...I have no idea where in the code is causing this...does anyone know?  It's not footer because I've commented it out and the gap still persists. </p>
  
  <p>I've tried filling the div and image sizes to 100% and 100% width/height...no effect.</p>
  
  <p><img src="https://i.stack.imgur.com/0zqdI.jpg" alt="enter image description here"></p>
  
  <p>and this is the full background </p>
  
  <p><img src="https://i.stack.imgur.com/L1dUN.png" alt="background image"></p>
  
  <p>As you can see the bottom half is missing.  </p>
  
  <p>If I use background-image in css...it crops the background and forces it to stay on top rather than bottom. </p>
  
  <p>I've also tried using a div and filling it with background</p>
  
  <pre><code>   .form-wrapperBack {
      width: 100%;
      height: 100%;
      font-size: 14px;
      text-align: center;
      color: #bfbfbf;
      font-weight: bold;
      background: #fff;
      font-family: Arial;
  
   background-image: url("/img/river.png");
    background-repeat: no-repeat;
     background-height: 100%;
     background-position: center bottom;
  </code></pre>
  
  <p>Please see image of what it looks like when I set the background in css:</p>
  
  <pre><code>/* general settings */
  html {
    min-height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
    position:relative;
    width:100%;
  background-color:#000;
  
  }
  body {
    background-color:000;
    font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
    color:#FFF;
    font-weight:100;
    margin:0;
    min-height:100%;
    width:100%;
  
  
  
  }
  </code></pre>
  
  <p>This is  index.html</p>
  
  <pre><code>&lt;html ng-app="financeApp"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- CSS --&gt;
  
  
  &lt;!--&lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;--&gt;
  &lt;!--  &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;--&gt;
   &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
  
  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  
  
  &lt;/head&gt;
    &lt;!-- HEADER AND NAVBAR --&gt;
    &lt;header&gt;
  
  
  
  
  
      &lt;div class="wrap"&gt;
        &lt;!-- logo --&gt;
  
         &lt;a href="#!"&gt;&lt;img class="logo" src="img/history_00.png" /&gt;&lt;/a&gt;
    &lt;h7&gt;Building lasting relationships&lt;h7&gt;
  
  &lt;/header&gt;
  
  
  &lt;body&gt;
  &lt;ng-controller = "demoCtrl"&gt;
  
  &lt;ul class="nav nav-pills pull-right"&gt;
  
  
  
        &lt;li ng-class="{active: isState('home') }"&gt;
          &lt;a ui-sref="home"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li ng-class="{active: isState('form') }"&gt;
          &lt;a ui-sref="form"&gt;Join Us&lt;/a&gt;
        &lt;/li&gt;
         &lt;li ng-class="{active: isState('about') }"&gt;
          &lt;a ui-sref="about"&gt;About&lt;/a&gt;
        &lt;/li&gt;
         &lt;li ng-class="{active: isState('invest') }"&gt;
         &lt;a ui-sref="invest"&gt;Investments&lt;/a&gt;
        &lt;/li&gt;
  
  
  
  
  
        &lt;li ng-class="{active: isState('contact') }"&gt; &lt;/div&gt;
          &lt;a ui-sref="contact"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
  
   &lt;li ng-class="{active: isState('login') }"&gt;
         &lt;a ui-sref="login"&gt;log In&lt;/a&gt;
        &lt;/li&gt;
  
   &lt;li ng-class="{active: isState('logout') }"&gt;
         &lt;a ui-sref="logout"&gt;log Out&lt;/a&gt;
        &lt;/li&gt;
  
  
      &lt;/ul&gt;
      &lt;h3 class="text-muted"&gt;          &lt;/h3&gt;
      &lt;br&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="back-Img3"&gt;
  
  
  &lt;div ui-view class=""&gt;&lt;/div&gt;
  
  
  &lt;br&gt;
  
  
  
  
  
  &lt;/div&gt;
  
  
  
  
  
  
  
  
  &lt;!-- Loading the Footer --&gt;
    &lt;div id="footer" ng-include="'partials/footer.html'"&gt;&lt;/div&gt;
  
  
  
  
  
  
  
     &lt;!-- App JS --&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/rg-slider.min.js"&gt;&lt;/script&gt;
  
   &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
   &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"&gt; &lt;/script&gt;
  &lt;script src="js/controllers/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives/directives.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="js/dialogs.js"&gt;&lt;/script&gt;
  
   &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>If I edit the css and change the image sizing...it also changes the size of the view which I don't want.</p>
  
  <p>style.css</p>
  
  <pre><code>/* general settings */
  html {
    min-height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
    position:relative;
    width:100%;
  background-color:#000;
  }
  body {
    background-color:000;
    font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
    color:#FFF;
    font-weight:100;
    margin:0;
    min-height:100%;
    width:100%;
  }
  
  
  div[back-img3]{
      width: 100%;
      height:500px;
      color: #fff;
  }
  </code></pre>
  
  <p>Also it only shows a part of the background...not all of it.</p>
  
  <p>Is there another way to set an image background in index.html?</p>
  
  <p>Help would be appreciated thank you.</p>