How can I add a fixed, centered background image to my store without affecting header and footer?

[system]

Please help!!!

I want to add a centered background image to my shopify store. This means I don’t want the image to go into the header or footer. This is the coding I added to the bottom of the base.css file:

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-color: transparent !important;
background-position: top left !important;
}
main#MainContent {
background-image: url(https://cdn.shopify.com/s/files/1/0647/1188/5065/files/kitchen2.png?v=1680527828)!important!important);
}
.footer:not(.color-background-1) {
border-top: none;
background-color: black !important;
}
.locale-selectors__container {
padding-bottom: 2em;
background-color: black;
}

There 2 problems with this code.

1. My announcement bar on the very top became white and is pretty much invisible.
2. The background image repeads itself instead of staying fixed while scrolling down.

This is my store url: https://gadget-daddy.com/

[PageFly-Victor]

Hi @Anonymous ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

You can try this code below:

.announcement-bar.color-accent-1.gradient {
    background: black !important;
}
main#MainContent {
  background: var(--gradient-background);
  background-attachment: fixed;
  background-color: transparent !important;
  background-position: center center; !important;
  background-image: url(https://cdn.shopify.com/s/files/1/0647/1188/5065/files/kitchen2.png?v=1680527828) !important;
  background-repeat: no-repeat;
  background-size: cover;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

[system]

Hey,

this is ALMOST perfect. The only issue is that the background is not transparent for everything in the center.

[PageFly-Victor]

I think you should set the “gradient-background” to transparent value in theme setting like #ffffff00

[system]

Do you mean in the regular shopify theme settings or in the theme.liquid? The shopify theme settings don’t allow transparent value and I can’t find anything else. Please help me finish this

[PageFly-Victor]

You can try and add this code below to base.css:

main#MainContent .gradient {
    background: transparent !important;
}

[system]

It worked. Thank you very much!