How to make background of one section transparent as it scrolls over a sticky section.

Site URL: https://clover-and-crow.squarespace.com/

Hi! I'm trying to make the background of a section transparent as it scrolls over the section above it which I've made sticky. I want a series of images to scroll over my logo, but try as I might, I can't make the background of the section containing the images transparent. Here's a vid to help show what's happening:

https://www.loom.com/share/08e3bcf0f48c4d9292622c77ff1f4a99

Password for the site is IMG_5314

On 7/26/2022 at 8:28 AM, cloverandcrow said:

Site URL: https://clover-and-crow.squarespace.com/

Hi! I'm trying to make the background of a section transparent as it scrolls over the section above it which I've made sticky. I want a series of images to scroll over my logo, but try as I might, I can't make the background of the section containing the images transparent. Here's a vid to help show what's happening:

https://www.loom.com/share/08e3bcf0f48c4d9292622c77ff1f4a99

Password for the site is IMG_5314

Do you mean something like this?

Try adding to Home > Design > Custom Css

section[data-section-id="62df3a5a3d29e478cc725e29"] {
  background: transparent;
}

Let me know how it works on your site

Yes, exactly except the code doesn't work 😞

I have been trying to do this and this is what I came up with...

Try,

Design > CSS >

section[data-section-id="6334b1950de34d73dd870a2a"] {
  opacity: 0 !important;
  }

In the same section add a code black and add this:

<style>
body {
 background-image: url("Your background image link");
    background-repeat: no-repeat;
    background-attachment: fixed;

}
</style>

I have no coding experience and it worked for me!

16 hours ago, VelocityMarketingGroup said:

I have been trying to do this and this is what I came up with...

Try,

Design > CSS >

section[data-section-id="6334b1950de34d73dd870a2a"] {
  opacity: 0 !important;
  }

In the same section add a code black and add this:

<style>
body {
 background-image: url("Your background image link");
    background-repeat: no-repeat;
    background-attachment: fixed;

}
</style>

I have no coding experience and it worked for me!

 

Have you replace this link with real image link yet?

background-image: url("Your background image link");

The only issue with this code is it only works on a desktop or android mobile devices. It doesn't not work with iOS. Anyone know why?

On 10/5/2022 at 1:23 AM, VelocityMarketingGroup said:

The only issue with this code is it only works on a desktop or android mobile devices. It doesn't not work with iOS. Anyone know why?

Can you share link to page where you have problem?

https://code-demo.squarespace.com/

passcode = codedemo 

On 10/7/2022 at 3:45 AM, VelocityMarketingGroup said:

https://code-demo.squarespace.com/

passcode = codedemo 

It looks fine to me. Which section did you use code?

Like I mentioned before, the code works on the pc and any android devices but does not work on apple/ iOS devices. I am wondering why?

Thanks

On 10/10/2022 at 10:50 PM, VelocityMarketingGroup said:

Like I mentioned before, the code works on the pc and any android devices but does not work on apple/ iOS devices. I am wondering why?

 

Thanks

Remove background-attachment: fixed; iOS doesn't support this attribute, and no way to fix it.