jQuery Mobile background image not showing on a full screen iPad web app

问题

I have set a background on the data-role="page" element like so

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

It works perfectly fine on a desktop browser and on the iPad safari browser.

The issue I am having is that when you add the website to the home screen as an 'app' and it is a full screen web app. It doesn't show the background...

I have tried setting it via a style sheet and inline and both ways give me the same issue.

I am completely out of ideas as to why this wouldn't work.

Any ideas are greatly appreciated.

回答1:

In the end this is what worked for me.

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

wouldn't work via a css file.

回答2:

Apply this to the element:

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

回答3:

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>

回答4:

In your CSS file:

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

回答5:

Create a css class and end every attribute with !important to over-rule framework css. Thats why it is working inline only

来源：https://stackoverflow.com/questions/10741733/jquery-mobile-background-image-not-showing-on-a-full-screen-ipad-web-app

标签

web-applications

jquery-mobile

mobile-website