CODEWITHSUNDEEP
htmlcssangularjsimage
Superunknown
Superunknown

Reputation: 501

angularjs background issues. large gap between background and footer. Image resizing doesn't change anything

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 without affecting the view that's on top. Some suggestions haven't been helpful.

The main culprit is this gap here..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.

I've tried filling the div and image sizes to 100% and 100% width/height...no effect.

enter image description here

and this is the full background

background image

As you can see the bottom half is missing.

If I use background-image in css...it crops the background and forces it to stay on top rather than bottom.

I've also tried using a div and filling it with background

   .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;

Please see image of what it looks like when I set the background in css:

/* 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%;



}

This is index.html

<html ng-app="financeApp">
  <head>
    <meta charset="utf-8">
    <!-- CSS -->


<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<!--  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />


</head>
  <!-- HEADER AND NAVBAR -->
  <header>





    <div class="wrap">
      <!-- logo -->

       <a href="#!"><img class="logo" src="img/history_00.png" /></a>
  <h7>Building lasting relationships<h7>

</header>


<body>
<ng-controller = "demoCtrl">

<ul class="nav nav-pills pull-right">



      <li ng-class="{active: isState('home') }">
        <a ui-sref="home">Home</a>
      </li>
      <li ng-class="{active: isState('form') }">
        <a ui-sref="form">Join Us</a>
      </li>
       <li ng-class="{active: isState('about') }">
        <a ui-sref="about">About</a>
      </li>
       <li ng-class="{active: isState('invest') }">
       <a ui-sref="invest">Investments</a>
      </li>





      <li ng-class="{active: isState('contact') }"> </div>
        <a ui-sref="contact">Contact</a>
      </li>

 <li ng-class="{active: isState('login') }">
       <a ui-sref="login">log In</a>
      </li>

 <li ng-class="{active: isState('logout') }">
       <a ui-sref="logout">log Out</a>
      </li>


    </ul>
    <h3 class="text-muted">          </h3>
    <br>
</div>



<div id="back-Img3">


<div ui-view class=""></div>


<br>





</div>








<!-- Loading the Footer -->
  <div id="footer" ng-include="'partials/footer.html'"></div>







   <!-- App JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
 <script src="js/rg-slider.min.js"></script>

 <script src="js/script.js"></script>
    <script data-require="[email protected]" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>


<script src="js/dialogs.js"></script>

 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

If I edit the css and change the image sizing...it also changes the size of the view which I don't want.

style.css

/* 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;
}

Also it only shows a part of the background...not all of it.

Is there another way to set an image background in index.html?

Help would be appreciated thank you.

Upvotes: 0

Views: 1291

Answers (2)

Glorifind
Glorifind

Reputation: 402

div[back-img3]{
    width: 100%;
    height:500px;
    color: #fff;
}

If you declare image as background of this particullary div it is always 500px and background is cropped to fit that.

Try to add background to the body element

background:src('file_path');
background-size:cover;

also you have little typo here:

body {
  background-color:000;

Upvotes: 0

tao
tao

Reputation: 90038

You should position your .form-wrapperBack fixed, make sure it has 100% width and height and that it stays at the top of page and set the background-size to cover:

.form-wrapperBack {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url("/img/river.png");
    background-size: cover;
}

I made a fiddle for you, using some random image.

If any of the rules above does not apply, it must be overridden by another css rule, with a stronger selector. You can easily find it by inspecting the element in a modern browser and either remove that rule or make your selector stronger.

Upvotes: 2

Related Questions