Parallax Background

Adding parallax background

Go to the any content page.

  1. Add content in the body.
  2. Go all the way down to your page and look for the option says Manual CSS.
    • Note: If you don't see option for Manual CSS, go to the Add Manual CSS page and learn how to add a section for Manual CSS.
  3. Use the below CSS code. Copy the code and paste it in that Manual CSS section to see the parallax background. Also, underlined part shows where you can add your image url.
.register-bg {
background: url('/imageurl.png')
center center no-repeat;
background-size: cover;
background-attachment:
fixed;
padding-top:1em;
margin-top:4em;
height:500px;
}

For more than one parallax background:

  1. Add more than one Body(Edit Summary) content section on you page through Manage Fields.
    • Go to the Structure >> Content Type >> Basic page. In that look for the manage fields.
    • Add field that looks like below.
  2.  Follow the above step 2 and add one more same CSS code with different image url.