I'm fooling around with ionic and angular.js and was wondering how to properly apply background styles to side menus. I do have a blured background image and content boxes hovering above the background image. My intention is when opening up the left or right side menu, the background remains fixed and only the content moves.
The left screenshot shows my result so far. The backgroundimage is attached to each content view of the menus, as otherwise setting it transparent the underlying content is reveiled. The right screenshot is a simple html mockup to illustrate the final result.
Does anyone have some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-side-menus class="sideMenus">
<ion-side-menu-content class="custom">
<h1>bdafs1</h1>
</ion-side-menu-content>
<ion-side-menu side="left" class="custom">
<h1>bdafs2</h1>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
I'm fooling around with ionic and angular.js and was wondering how to properly apply background styles to side menus. I do have a blured background image and content boxes hovering above the background image. My intention is when opening up the left or right side menu, the background remains fixed and only the content moves.
The left screenshot shows my result so far. The backgroundimage is attached to each content view of the menus, as otherwise setting it transparent the underlying content is reveiled. The right screenshot is a simple html mockup to illustrate the final result.
Does anyone have some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-side-menus class="sideMenus">
<ion-side-menu-content class="custom">
<h1>bdafs1</h1>
</ion-side-menu-content>
<ion-side-menu side="left" class="custom">
<h1>bdafs2</h1>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
1 Answer
Reset to default 5Basically, you'll need to set the background to the body and then make everything else transparent.
body {
background: url(http://i.imgur./hgzVvzN.jpg);
background-attachment:fixed;
background-position: center;
}
.pane, .menu, .view, .list, .item {
background: transparent;
}