How to edit my base.css code that only affects a specific image banner on a specific page

[ramonkooij]

Dear Shopify Community,

I inserted a code in the assets/base.css code which works great and now show an extra floating image in the Image banner. Right now it shows up in every Image Banner on my website. 

But now I only want it to show up in the top Image Banner on the Home Page Index page.

https://gincent.nl/

Could you please help me out on this one?

@media only screen and (min-width: 150px) {
  .banner__content:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0868/2782/7533/files/GINCENT_FLAT_BOTTLES_SET_SERIES_3_ROW_REVERSE_ONLINE.png?v=1739865227);
    display: block;
    position: left;
    width: 85%;
    max-width: 80rem;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    top: 50%;
    margin: auto%;
    opacity: 100;
  }

  .banner__content {
    position: relative;
  }
}

[websensepro · Accepted solution]

Hi @ramonkooij 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media only screen and (min-width: 150px) {
 section#shopify-section-template--24118061367629__image_banner_eBqTTG .banner__content:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0868/2782/7533/files/GINCENT_FLAT_BOTTLES_SET_SERIES_3_ROW_REVERSE_ONLINE.png?v=1739865227);
    display: block;
    position: left;
    width: 85%;
    max-width: 80rem;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    top: 50%;
    margin: auto%;
    opacity: 100;
  }

  section#shopify-section-template--24118061367629__image_banner_eBqTTG .banner__content {
    position: relative;
  }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[ramonkooij]

Wow! This is awesome. It works!

Thanks for your quick reply!