Setting app background-image create issue in working with side-menu


#1

I am trying to set background image while trying below css

body        {
    background: url("../images/bg.jpg") no-repeat 100% 100%;
    background-attachment:fixed;
    background-position: center;
}

.pane, .menu, .view, .list, .item       {
    background: transparent;
}

i am getting issue like below.if I remove above code menu will work properly as it should work

if I try to remove or replace backgroung color property with backgroung image then also i am getting same issue.

.pane,
.view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $base-background-color;//tried removing this line or tried replace with background-image property
  overflow: hidden;
}

Thanks


#2

bro your side menu is messed up … if you want to add background than just add css class to ion-content tag of the page


#3

I need bg for full app including tab bg
Thanks for your help


#4

see this plunker https://plnkr.co/edit/EHTghmk0RgiQ7QCIDC9G?p=preview. i have made changes to bg color but your side menu and tab view is messed up. tab view should be inside the sidemenu


#5

Hi Harshit

your code have same issue as i have , Can you please give me working example?

if I remove inline css(for set background) from index page, menu is working fine.

issue seems in background-color vs background-image in below css.

 .pane,
.view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $base-background-color;//tried removing this line or tried replace with background-image property
  overflow: hidden;
}

#6

hey go to this link https://oneswiggy.herokuapp.com/#/menu/restaurant/overview and go to f12 developer tools, elements inside that select ionic-side-menu-content and change the backgroundcolor from .pane .view class. It is working all right


#7

background-color is not the issue, i need to put background image

issue starts when you just change background-color to background-image


#8

hey go to same link and select ionic-side-menu-content tag and set the background-image from .pane .view class. It is working all right have a look on this