Question

在我的jQuery mobile 1.4.0应用程序中，我有一个包含列表视图的页面问题是，当我为此页面添加了背景图像时，随着背景随着内容的延伸，列表元素变得越来越大移动设备上的数据明显多于jsFiddle，这是我的jsfiddle。

如何将背景图像设置为全屏并固定，而不是使用内容拉伸？请帮帮我..

这里我如何向我的页面添加背景图片：

#EmPListPage{
   background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-  pinky.gif') !important;
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }

 #PageContent{

   background: transparent ;    
 }

Answer 1

在我的情况下，解决方案是使用contain，如下所示：

.ui-page {
    background: #000;
    background-image: url("http://bettingmasters.info/wp-content/uploads/2013/11/19757-football-stadium-1920x1200-sport-wallpaper.jpg");
    background-size: contain;  
}

Answer 2

您需要将背景图像附加到文档body而不是容器div。在小提琴中使用CSS：

body {
   background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#EmPListPage, #PageContent{    
   background: transparent ;    
}

小提琴：http://jsfiddle.net/chucknelson/6zKJg/

如何在jQuery mobile 1.4.0中防止页面背景图像拉伸？

2 个答案: