How to stop a Background image from scrolling! DAWN THEME

Store Design
,
1

Hi,

I have have added a custom background image to the ‘Rich Text’ section of my homepage. I have written the words “Our instagram” and hidden the button and body text so only this title shows. I have then added the below css but WHY does the background still scroll? i dont understand what im doing wrong?

URL: https://flicka-home.myshopify.com/

Password: Sandra

This is the code i have used:

/* instagram title */
.section-template–18604072534323__e0022347-0035-48ce-ba00-9b620ccce0e7-padding {
padding-top: 32px;
padding-bottom: 32px;
background-image: url(‘https://cdn.shopify.com/s/files/1/0732/6557/8291/files/insta_bg2.png?v=1684746050’);
background-size: contain;
background-position: center;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}

2

It seems that the background scrolling issue you’re experiencing may be related to the CSS property background-attachment: fixed !important;. When this property is set to fixed, the background image remains fixed in the viewport, causing it to not scroll with the content.

However, in some cases, certain themes or elements may have their own styles that override this property, resulting in the background still scrolling. To ensure that the background remains fixed, you can try adding the background-attachment: fixed !important; to the parent container of the section-template--18604072534323__e0022347-0035-48ce-ba00-9b620ccce0e7-padding class.

For example, you can modify your CSS code as follows:

/* instagram title */
.section-template--18604072534323__e0022347-0035-48ce-ba00-9b620ccce0e7 {
  background-image: url('https://cdn.shopify.com/s/files/1/0732/6557/8291/files/insta_bg2.png?v=1684746050');
  background-size: contain;
  background-position: center;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
3

@sandraleedesign you can refer below demo it might be helpful to you :
https://css-tricks.com/the-fixed-background-attachment-hack/

4

Hello, i used your revised code but now the background image has completely dissapeared. Do you know why?