Strange gradient behaviour in css with angularjs

Question

Here is the css that i am using

html .body-dark{
  background: #242A3F;
  background: -webkit-linear-gradient(left top, #242A3F, #333C55);
  background: -o-linear-gradient(bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
  background: linear-gradient(to bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(-90deg, red, yellow);
}

And the jade related

doctype
html.no-js
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    base(href='/')
    title Travel
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet',href='main.css',async)
  body.body-dark(ng-app='application')
    div(ng-view)
    <!-- build:js inline app.min.js -->
    script(src='app.min.js')
    <!-- /build -->
    script(src='//localhost:35729/livereload.js')

So as you can see the gradient class is attached to the body and i assume that there should be only one gradient. But on the other hand here is the output i am getting

Another important information might be that the page is made of two components, the nav template and form template both of which are called using ng-include Although i am not sure if the error is because of that. Also here is a copy of DOM from browser

As you can see the body is only till the form ends, how can i extend it out to whole page. Also why are there two gradient elements under that ?

Add `no-repeat` as well. By default browser will repeat a background image in both x and y dimensions. — Mohammad Usman, Jan 18 '17 at 08:52

score 0 · Answer 1 · answered Jan 18 '17 at 08:54

Set

html, body, .body-dark{
  background: #242A3F;
  background: -webkit-linear-gradient(left top, #242A3F, #333C55);
  background: -o-linear-gradient(bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
  background: linear-gradient(to bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(-90deg, red, yellow);
  height: 100%;
}

Strange gradient behaviour in css with angularjs

1 Answers1