<!doctype html>
<head>
<script src="jquery-1.11.3.js"></script>
<script src="jquery.stellar.min.js"></script>
<style>
body {
background-image: url("image/bg1.jpg");
width:3000px;
margin: 0;
}
#pic1 {
background-image: url("image/m1.png");
width: 671px;
height: 400px;
}
#pic2 {
left:44%;
position:absolute;
}
#pic2 img {
width:500px;
height:auto;
}
div {
background-size: 100% 100%;
background-repeat: no-repeat;
float:left;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="pic1" data-stellar-background-ratio="0.5"></div>
<div id="pic2" data-stellar-ratio="0.1"><img src="image/m2.png"></div>
<script>
$('body').stellar({verticalScrolling:false});
</script>
</body>
</html>