you should change this too in template.css:

#jf-slideshow {
background-size: 100% 100%; /*cover;*/
background-attachment: local; /*fixed;*/
}

The problem remains.So, I would like some clarification:

the changes below should be included within the module "@media (min-width: 481px) and (max-width: 599px)", right???

#jf-body {
background-color: #fff;
position: relative;
z-index: 9;
}

#jf-footer {
z-index: -1 !important;
}

#jf-slideshow {
background-size: 100% 100%; /*cover;*/
background-attachment: local; /*fixed;*/
}

No, in the master part of the css, but z-index:-1 gives problem (it's unclickable), so I fixed it:

1) Move the div.copyright outside the div.main, but still inside the div#jf-footer

2) In template.css:

---add at the end of the file:
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2),
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
#jf-footer .copyright {
position: relative;}
}

---change in the main part:
#jf-footer {
background-color: #313131;
color: #fff;
font-family: misoregular;
text-align: center;
min-height: 452px;
position: relative;
}

#jf-footer .main-inner1 {
background: url(../images/linestar-footer.png) no-repeat center 70px;
padding: 160px 0 0;
position: relative;
bottom: 40px;
width: 960px;
}

That's very very good. Congratulations and thank you very much!

Do we still need to update index.php file by the download indicated by m.freak?

Yes