stackoverflow: How to Prevent the page background image from stretching in jQuery mobile 1.4.0?
http://stackoverflow.com/questions/22102458/how-to-prevent-the-page-background-image-from-stretching-in-jquery-mobile-1-4-0
HTML
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<div data-role="page" id="EmPListPage" >
<div data-role="header" data-position="fixed" data-tap-toggle="false" >
<h1> page1</h1>
</div>
<div data-role="content" id="PageContent">
<ul data-role="listview" id="EmpList" data-inset="true" data-filter="true" data-filter-placeholder="Search" data-split-icon="delete" style="margin-top: 40px;" >
<li><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > Emp1</font><BR />
<font class="line2" >Id:123</font><BR />
<font class="line3" >Dep:Marketing</font><BR />
<font class="line4" >Sal:2000$</font><BR />
<font class="line5" >Spec:Social Marketing</font>
</a><a href="#" id="split-icon1" class="delete">Delete</a>
</li>
<li class="RTLList" ><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > EmP2</font><BR><BR>
<font class="line2" >Id:123</font><BR>
<font class="line3" >Spec:Trainee</font><BR>
</a><a href="#" id="split-icon2" class="delete">Delete</a>
</li>
<li class="RTLList" ><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > EmP3</font><BR><BR>
<font class="line2" >Id:1323</font><BR>
<font class="line3" >Spec:Trainee</font><BR>
</a><a href="#" id="split-icon2" class="delete">Delete</a>
</li>
<li class="RTLList" ><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > EmP4</font><BR><BR>
<font class="line2" >Id:1993</font><BR>
<font class="line3" >Spec:Trainee</font><BR>
</a><a href="#" id="split-icon2" class="delete">Delete</a>
</li>
<li class="RTLList" ><a...
CSS
body {
background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
background-repeat: no-repeat;
background-size: auto 100%;
background-attachment: fixed;
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
#EmPListPage, #PageContent {
background: transparent ;
}
#EmpList li a:first-child{
min-height:100px !important;
background-color: transparent !important;
background-image: url('') !important;
}
.ui-listview>.ui-li-has-thumb>.ui-btn {
margin-left: 2.5em;
padding-left: 1em;
padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>.ui-btn>img:first-child{
position: absolute;
top: 10px ;
right:8px;
left: auto;border: solid green;
max-width:100px !important;
max-height:100px !important;
}
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
border-top-left-radius: 0;
border-top-right-radius: 5px;
}
.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
border-bottom-left-radius: 0;
border-bottom-right-radius: 5px;
}
.ui-listview>li.ui-li-has-alt>.ui-btn{
margin-right: 0;
}
.ui-listview>li.ui-first-child>a.ui-btn+a.ui-btn{
border-top-left-radius: 5px;
border-top-right-radius: 0px;
}
.ui-listview>li.ui-first-child>a.ui-btn:first-child{
border-top-left-radius: 0px;
border-top-right-radius: 5px;
}
.ui-listview>li.ui-last-child>a.ui-btn+a.ui-btn{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 0px;
}
.ui-listview>li.ui-last-child>a.ui-btn:first-child{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 5px;
}
.ui-listview-inset>li.ui-li-has-alt>.ui-btn+.ui-btn{
border-right: 0;
}
.ui-listview-inset>li>a.ui-btn:first-child{
border-left: 0;
}
.delete {
left: 0 !important;
}