css - jQuery Mobile 1.4.0 如何防止页面背景图片拉伸(stretch)？

Question

在我的 jQuery mobile 1.4.0 应用程序中，我有一个包含 ListView 的页面 问题是，当我为此页面添加背景图像时，列表元素随着背景随内容而变大而变大，这在移动设备上比 jsFiddle 更清晰，这是我的 jsfiddle .

如何使背景图像全屏固定，而不是随内容拉伸(stretch)？请帮助我..

这里是我如何将背景图片添加到我的页面:

#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;  
}