Background parallax

Blog Staff

September 13, 2022

This effect makes background parallax when background image moves with different speed with wrapper. This can be used as Image Container block

GreenShift – Background parallax block

And even more cool, when you set it as full width block.

GreenShift – Background
parallax block

There are many options in Parallax Background block. You can set different speed, scroll ration and Fade Overlay Effect

GreenShift – Background
parallax block

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>This effect makes background parallax when background image moves with different speed with wrapper. This can be used as Image Container block</p>

<div id="gspb-gsap-parbg-gsbp-29803923-1309" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg"><div class="gs_parallax_overlay"></div>
<h2 id="gspb_heading-id-gsbp-5b9856f8-fea3" class="gspb_heading gspb_heading-id-gsbp-5b9856f8-fea3 ">GreenShift - Background parallax block</h2>
</div>

<p>And even more cool, when you set it as full width block.</p>

<div id="gspb-gsap-parbg-gsbp-5cab7619-3552" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull"><div class="gs_parallax_overlay"></div>
<div id="gspb_container-id-gsbp-0605a06a-7996" class="gspb_container gspb_container-gsbp-0605a06a-7996 wp-block-greenshift-blocks-container">
<h2 id="gspb_heading-id-gsbp-8fe6c97d-f85a" class="gspb_heading gspb_heading-id-gsbp-8fe6c97d-f85a ">GreenShift - Background<br> parallax block</h2>
</div>
</div>

<div id="gspb-gsap-parbg-gsbp-caeeef22-bce8" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull"><div class="gs_parallax_overlay"></div>
<div id="gspb_container-id-gsbp-58ccde99-664a" class="gspb_container gspb_container-gsbp-58ccde99-664a wp-block-greenshift-blocks-container">
<h2 id="gspb_heading-id-gsbp-9300152a-bcb5" class="gspb_heading gspb_heading-id-gsbp-9300152a-bcb5 ">GreenShift - Background<br> parallax block</h2>
</div>
</div>

<p>There are many options in Parallax Background block. You can set different speed, scroll ration and Fade Overlay Effect</p>

<div id="gspb-gsap-parbg-gsbp-7b8c4177-f5b2" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull" data-first="yes" data-fade="yes"><div class="gs_parallax_overlay"></div>
<div id="gspb_container-id-gsbp-1be7c73a-2994" class="gspb_container gspb_container-gsbp-1be7c73a-2994 wp-block-greenshift-blocks-container">
<h2 id="gspb_heading-id-gsbp-bcb3cafa-937d" class="gspb_heading gspb_heading-id-gsbp-bcb3cafa-937d ">GreenShift - Background<br>parallax block</h2>
</div>
</div>

<div id="gspb-gsap-parbg-gsbp-79b23d9d-bd3e" class="gs-gsap-parallaxbg wp-block-greenshift-blocks-parallaxbg alignfull"><div class="gs_parallax_overlay"></div>
<div id="gspb_container-id-gsbp-6c29a708-dca2" class="gspb_container gspb_container-gsbp-6c29a708-dca2 wp-block-greenshift-blocks-container">
<h2 id="gspb_heading-id-gsbp-93d78c61-083b" class="gspb_heading gspb_heading-id-gsbp-93d78c61-083b ">GreenShift - Background<br> parallax block</h2>
</div>
</div>

GreenShift – Background parallax block

GreenShift – Background parallax block

GreenShift – Background parallax block

GreenShift – Backgroundparallax block

GreenShift – Background parallax block

GreenShift – Background
parallax block

GreenShift – Background
parallax block

GreenShift – Background
parallax block

GreenShift – Background
parallax block