background image disappear because of left-panel

css, jquery, jquery-mobile

Solution

In jQuery Mobile 1.4, when a panel is opened for the first time, it wraps content div in a `.ui-panel-wrapper` div. This div overrides page's div background.

This behavior occurs when panel's `data-display` is set to either `push` or `reveal`, but not `overlay`.

To solve this problem, add `background-image` to both `[data-role=page]` and `.ui-panel-wrapper` followed by `!important` to force override.

[data-role=page], .ui-panel-wrapper {
  background-image: url(../bg.png) !important;
  background-repeat: repeat;
}

Demo

Problem

I've a jQuery mobile app with a left panel menü. If I click on the panel, my background disappears. I'm not sure, with code I should post to you. Thats the CSS code for my background: ``` [data-role=page] { background-image: url(../images/pattern.png); background-repeat: repeat; } ```

Original source