I need help solving a parallax issue that I'm currently facing.
On my webpage, I have a background image positioned at the top with a parallax effect achieved through background-position: fixed. However, I now require the image to scroll along with the page, and I'm unsure how to proceed.
I think JavaScript and potentially background-position: scroll could be used to achieve this, but I'm not sure where to begin.
In the basic fiddle I provided, you can see the current parallax effect in action, but I need the image to scroll as the page does.
Any assistance would be greatly appreciated.
.image {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url('http://www.navipedia.net/images/a/a9/Example.jpg');
}<section>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
</section>
<div class="image"></div>
<section>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architedicta."<br>"</p>
<br><br>
<p>"Sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequinques humident. Neque porro quisquam eius."]" *(./section>