How to implement a parallax background

Hello,

I’m trying to set a parallax background image in my “Employees” and “Services” widgets like the one shown in the Astrid demo (https://demo.athemes.com/astrid/), but I can’t find out how. Please help!

Here’s my website - www.catalyst-spt.com

Thanks!

Heidi

Hello Heidi,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-image .large-header {
        opacity: 0;
      }
      .header-image {
        background-image: url('https://catalyst-spt.com/wp-content/uploads/2019/07/cropped-Screen-Shot-2019-07-11-at-11.52.41-AM.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    }

Regards,
Kharis

Hi Kharis,

Thank you for your response, however you misunderstood my request. I don’t want the header imagine to be parallax. I want to know how to create a background parallax image behind the Employees and Services widgets.

Thanks for your help,

Heidi

Hello Heidi,

I am sorry, I wrote too fast. Try this CSS code:

    /* Employees section */
    section.atframework_employees_widget {
      background-image: url('https://catalyst-spt.com/wp-content/uploads/2019/07/cropped-Screen-Shot-2019-07-11-at-11.52.41-AM.png') !important;
    }

    /* Testimonials section */
    section.atframework_testimonials_widget {
      background-image: url('https://catalyst-spt.com/wp-content/uploads/2019/07/cropped-Screen-Shot-2019-07-11-at-11.52.41-AM.png') !important;
    }

    section.atframework_employees_widget,
    section.atframework_testimonials_widget {
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

Regards,
Kharis

That’s better. Thank you!!

Great! Glad to hear that code helped.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis