How to Prevent the page background image from stretching in jQuery mobile 1.4.0?

问题

In my jQuery mobile 1.4.0 app I have a Page which contains a list view the Problem is that when I have added a background image for this page as the list elements are becoming larger as the background stretchs with the content and this apears clearly on mobile devices more than jsFiddle ,this is my jsfiddle .

How can I make the background image to be fullscreen and fixed , not stretched with the content? Please help me ..

Here How I add a background image to my Page:

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

回答1:

In my case the solution was to use contain, like this:

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

回答2:

You will want to attach the background image to the document body instead of your container div. Using your CSS in the fiddle:

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

Fiddle: http://jsfiddle.net/chucknelson/6zKJg/

来源：https://stackoverflow.com/questions/22102458/how-to-prevent-the-page-background-image-from-stretching-in-jquery-mobile-1-4-0

标签

css

jquery-mobile

background-image

stretch