Geek asks and answers

How to prevent stretching the background image of a page in jQuery mobile 1.4.0?

In my jQuery mobile 1.4.0 application, I have a page containing a list view. The problem is that when I added the background image for this page, as the list items become larger as the background stretches with the content, and this is obvious on mobile devices more than on jsFiddle, this is my jsfiddle .

How to make the background image full-screen and fixed, and not stretched with the content? Please help me..

Here's how to 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
source share
2 answers

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

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

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

0

More articles:


All Articles