Jquery Mobile Android - Fixed full-screen backgrou

2019-02-09 07:18发布

站内问答 / HTML/CSS
955 4 6

I'm trying to add a full screen fixed background image to the first page only of a jquery mobile app for Android (I'm also using phonegap).

In a nutshell, I would like the background image to be fullscreen and fixed, while the page content scrolls above it. The background image also needs to scale to the size of different devices.

Here is what I have so far... 

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

With this CSS:

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

This obviously doesn't work so any nudge in the right direction would be appreciated, thanks in advance.

4条回答
Animai°情兽
2楼-- · 2019-02-09 07:38

This issue only appears when you try and use a repeating background image and also set it to fixed. apparently the bug in Android Chrome is in processing these two instructions together. So the fix is to use a non repeating background image and it will fix properly

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-02-09 07:51

There is a jQuery plugin that makes fullscreen backgrounds for your website.

http://www.buildinternet.com/project/supersized/

This option may work better for you than CSS because it using javascript to figure out what size the window is and scales the picture to fit it without stretching and distorting your image.

It also seems to have pretty good documentation on how to use it properly.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
4楼-- · 2019-02-09 07:53 
.ui-page {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}​

This changes the background image from the default gradient to an image of your choosing. The background image is applied to the .ui-page elements (the pseudo-pages), covers the whole page, and is fixed so it doesn't scroll with the page.

Here is a demo: http://jsfiddle.net/kKv4s/

Documentation:

Here is browser support for background-size: http://caniuse.com/#feat=background-img-opts

Update

You may want to create your CSS rule for the .ui-content element(s) rather than the .ui-page element(s) as the gradient-background for the .ui-content element can overlap the background we're adding to the .ui-page element:

.ui-content {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}​

Here is a demo: http://jsfiddle.net/kKv4s/1/

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
5楼-- · 2019-02-09 07:53

This Should Work.

     #background {
        background-image: url('grey.png');
        background-position:center; 
        background-repeat: no-repeat;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        z-index: 0; 
         }

       Html:---
       <body>
       <img id="background" />

If u get further problem please share

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)