How can I set fixed position Background image in j

2019-01-24 11:38发布

站内问答 / 前端开发
495 6 6

I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes. My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image. Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.

Can anyone please help? Thanks in advance.

6条回答
看我几分像从前
2楼-- · 2019-01-24 12:14

you can try this:

 .ui-mobile
 .ui-page-active{

 display:block;
 overflow:visible;
 overflow-x:hidden;

 }

works fine for me.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-01-24 12:17

Ok, so what I did instead was to create a fixed element within the body element of the page. So it would look like

<body>
   <div id="background"></div>
    ...
</body>

And for the CSS I stated the following:

    #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

And this did the trick for me. Hopefully it helps (someone out there :P)

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-01-24 12:19

You can set your background image to the jQuery page:

.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
5楼-- · 2019-01-24 12:23

You looking for background-attachment property.

div[data-role="page"]{
  background-attachment: fixed;
}

Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.

查看更多
0人赞 添加讨论(0) 举报
劫难
6楼-- · 2019-01-24 12:34 
<body>
   <div id="background"></div>
    ...
</body>

css:

#background {
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    #background {
        background-attachment: initial !important;
    }
}

The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by @media

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
7楼-- · 2019-01-24 12:38

Try with this, this work for me.

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0  fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)