Stationary background

Hola!

I'm looking to see if there is a way I can make my background photo stationary while the elements of the page move. Currently, if I add additional sections, the photo repeats. Just want the background to stay still while the type, buttons, etc. move when you scroll.

Here's the url of the photo as well.

https://images.squarespace-cdn.com/content/6215c82439b1f42e2775bc8a/8f89e78b-d915-4fc6-be89-ba6c7d99bdfc/DSC06504.jpg?content-type=image%2Fjpeg

Any help is greatly appreciated!

Thank you!

Can you share link to page on your site? I think we can try use some CSS position fixed to achieve this

On 3/1/2024 at 1:31 AM, tuanphan said:

Can you share link to page on your site? I think we can try use some CSS position fixed to achieve this

Yes, here’s the link! You can see what I mean on the home page mainly.

https://www.raphevaldez.com

On 3/12/2024 at 4:03 PM, Raphe said:

Yes, here’s the link! You can see what I mean on the home page mainly.

https://www.raphevaldez.com

Try this code to Website > Website Tools > Custom CSS

[data-section-id="65c73c8b6a821c56259741a3"] .section-background-content {
    position: fixed !important;
    top: 0;
}
[data-section-id="65c73c8b6a821c56259741a3"] ~ section, footer.sections, footer.sections section {
    position: relative !important;
    z-index: 9999 !important;
}

On 3/14/2024 at 12:56 AM, tuanphan said:

Try this code to Website > Website Tools > Custom CSS

[data-section-id="65c73c8b6a821c56259741a3"] .section-background-content {
    position: fixed !important;
    top: 0;
}
[data-section-id="65c73c8b6a821c56259741a3"] ~ section, footer.sections, footer.sections section {
    position: relative !important;
    z-index: 9999 !important;
}

 

Hi, I'm here looking for the answer to this too. I've put in your code, put in the id of the block but my image still moves when I scroll. The only thing that happened is my divider disappeared. Here is my link, I tried to lock in place the image of the woman looking away doing yoga.

 https://www.imageoptimist.com/movement

On 6/20/2024 at 1:30 PM, imageoptimist said:

Hi, I'm here looking for the answer to this too. I've put in your code, put in the id of the block but my image still moves when I scroll. The only thing that happened is my divider disappeared. Here is my link, I tried to lock in place the image of the woman looking away doing yoga.

 https://www.imageoptimist.com/movement

This is Section ID, not Block ID. You try checking it again.

On 6/22/2024 at 1:24 AM, tuanphan said:

This is Section ID, not Block ID. You try checking it again.

I have the image as a section but it isn't stationary. Has anyone been able to get this to work? Can you share an example and how you did it? 

Thanks!

Suzanne

Hi, 

I have a similar problem! I have made the background on my desktop view stationary but would like to have the same effect on my mobile view. Does anyone know a fix for this?

Thanks