I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared.
Here is the relevant code:
HTML (index.html):
<div class="col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
Angular view:
<div class="main-body">
<div ng-switch="xxCtrl.xxx">
</div>
</div>
CSS:
body {
margin-top: 50px;
background: url('../img/main-bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
font-size: 16px;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.main-body {
background-color: rgba(16, 16, 16, 0.6);
height: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: scroll; overflow-x:hidden;
z-index: -1000000;
}
I have attempted various approaches like moving the main-body class around, using ng-style for inline CSS, and adjusting the height property, but I couldn't achieve the desired result. The only time I succeeded was when I applied the main-body class to the wrapper div outside of ng-view in index.html, which displays the background across all views - not just one.
This seems more like a CSS issue rather than an Angular one. Any guidance on how to resolve this would be highly appreciated. Thank you!