Geek asks and answers

JQuery Mobile background image not showing on iPad full screen web application

I set the background for the data-role = "page" element this way

<div data-role="page" style="background: transparent url('img/background.jpg') no-repeat;" >

It works great on both the desktop browser and the Safari browser for iPad.

The problem I am facing is that when you add a website to your home screen as an “application”, and this is a full-screen web application. He does not show the background ...

I tried installing it through the stylesheet, and the built-in and in both cases gave me the same problem.

I completely rule out why this will not work.

Any ideas are welcome.

+3
source share
5 answers

In the end, this is what worked for me.

<div data-role="page" id="home" style="background: #000000 
    url('img/background.jpg') repeat;">

css.

+7

:

.#target-element {
    background : transparent url(YOUR_URL) 0 0 no-repeat fixed !important;
    background-size : cover;
}​
+2

Try with this

<style type="text/css">
.ui-page 
{

    background-image: url("img1.jpg");
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}
</style>
0
source

In your CSS file:

[data-role=page] {
    background: transparent url('img/background.jpg') no-repeat;
}
0
source

Create a css class and complete each attribute with !importantto compile a css frame. That's why it only works inside.

0
source

More articles:


All Articles