Images in JQuery Mobile Have Poor Quality..

Images in JQuery Mobile Have Poor Quality..

Please see the screenshot that is attached to this post, all the images are in bad quality i dont know why? i designed them for the retina display yet they come out poor...Please help...




My HTML code is:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>View App</title>
<link rel="stylesheet" href="style.css"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="script.js"</script>
</script></head>



<script type="text/javascript">

$(document).ready(function() {

  if ((screen.width<=960) && (screen.height<=640)) {

    $("img").attr("src", $("img").attr("src").replace(/([^.]*)\.(.*)/, "$1-iphone.$2"));

  }

});

</script>

<body>
<div id="home" data-role="page">
   
    <div data-role="header">
    <h1>Login</h1>
   
    </div>
        <img src="images/logo.png" alt="Background">

    <a href="#second" data-transition="flip">Second View</a>

</div>

<div id="second" data-role="page">
   
<div data-role="header">
    <h1>Second View</h1>
    <a href="#second" data-icon="star">Second View</a>
    <a href="#home"  data-role="button" data-icon="home" data-transition="flip">Home</a>


</div>


</body>
</html>


My CSS Code Is:

#home {
   
    background:url("images/backgroundlogin1.png");
    background-repeat:repeat-x;
    margin: 0 auto;
    font-size:30px;
   
   
}

.ui-header.ui-bar-a {
    height:66px;
    background:url("images/header2.png");
    background-repeat: no-repeat;

}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}