html - Div loses height in angular app - background cover stops working -
i had simple html app used background cover image. following code worked fine.
body{ width: 100%; height: 100%; margin: 0 0; padding: 0 0; } .mainbody{ width:100%; height: 100%; background: url("/images/background.jpg") no-repeat fixed center; background-size: cover; margin: 0 0; padding: 0 0; }
however, when created simple angular app w/bootstrap , used same code, mainbody div lost height component , image fails show.
the html simple , straightforward:
index.html
<body ng-app="testapp"> <div ui-view=""></div>
root.html
<div class="mainbody"> <div class="navtitle"> <span class="title">recordings</span> </div> <div class="navmenu"> <!-- <span class="fa fa-twitter menu twitter"></span> --> <span class="menu">about</span> <span class="menu">podcasts</span> <span class="menu">support</span> </div> </div>
the same root.html works in simple html file. , i've debugged angular app see if there additional css being added body , mainbody , have not found any. appreciated!
you have not mentioned order of adding own style-sheet in html. if have added bootstrap file below custom css file problem may occurred due over-right issue of css. first add bootstrap file , add custom css. if have done please provide html div.
Comments
Post a Comment