这种图片显示效果如何用代码实现？

如图，想让图片在文字下方，随着滚动文字，显示图片的一部分。
图片说明

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
<style type="text/css">
body {
    margin: 0;
    background: url("xxxxxxxxxxxxxxxxx.jpg") no-repeat fixed top;
}
</style>
</head>
<body>
<div style="height: 1000px; background-color: #fff; margin-bottom: 200px;"></div>
<div style="height: 1000px; background-color: #fff;"></div>
</body>
</html>