Try adding
#myBackgroundContainer{
background-attachment:fixed;
}
From the docs
the background-attachment CSS property determines whether that image's
position is fixed within the viewport, or scrolls along with its
containing block.
body {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSHC-qntWkhfC_CP9UcIle2WQItuhlbFS_AGK3WdtrAc4Pp6OIu');
background-repeat: no-repeat;
background-attachment: fixed;
}
#Partition{
background:gray;
height:200px;
}
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div id="Partition"></div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>
<div> scroll me </div>