How to Make Background Image Visible Across All Sections in Shopify "Sense" Theme

[Thom4s]

Hello everyone,

I’ve added a background image to my Shopify store using the “Sense” theme, but it’s currently only visible behind the header and between sections, not in the sections themselves. Can anyone help me make the background image visible across the entire site, including the sections?

body {
  background: var(--gradient-background);
  background-attachment: fixed;
  background-image: url(https://i.ibb.co/YBYgnt9p/image-fond2.jpg) !important;
  background-color: transparent !important;
  background-position: top left !important;
  background-size: auto !important;
  min-height: 100vh; /* Ensures the body takes up the full height of the page */
  margin: 0;
  padding: 0;
}

Also, I had to reduce the quality of the background image to make it work on Shopify. How can I upload a higher-quality background image without it being compressed or losing quality?

Any help or suggestions would be greatly appreciated!

Thanks in advance!

[BiDeal-Discount]

Hi @Thom4s

Can you share your store url & password (if applicable) to let me check and give you the solution

[Thom4s]

Hi @BiDeal-Discount here is the link : https://a6mhaf-ku.myshopify.com/

thank you

[Dan-From-Ryviu]

Please add this more code.

.gradient { background: transparent !important; }

[BiDeal-Discount]

Please try replace with this custom CSS:

body{
    background-attachment: fixed;
    background: transparent url('https://i.ibb.co/YBYgnt9p/image-fond2.jpg') !important;
    background-position: top left !important;
    background-size: auto !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

[Thom4s]

Thank you but i still have the same issue unfortunately

[BiDeal-Discount]

I see it’s showing as this

[Thom4s]

thank you, but it is still not working unforunately. I see it works on your screenshot but when i add it, the background becomes white. Could you share your code ?

[Thom4s]

Yes, and I would like to have it also showing on the background of the “browse latest products” section. so only the card with the text stays black and the image stays an image. Do you think it is possible ?

[BiDeal-Discount]

can you try this code:

.gradient:not(.utility-bar) {
    background-color: transparent !important;
}

The header top-bar still yellow background as you want

[Thom4s]

Thank you !