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

Technical Q&A

Topic summary

A Shopify store owner added CSS code to display a floating image in image banners, but it appeared on all banners across the website instead of just the homepage.

Problem: The CSS targeted .banner__content:before, which applied globally to all image banner sections.

Solution provided: Use a more specific CSS selector that targets only the homepage banner section by its unique ID: section#shopify-section-template--24118061367629__image_banner_eBqTTG .banner__content:before

Implementation:

  • Navigate to Online Store → Theme → Edit code
  • Add the updated CSS code to theme.css or base.css
  • The specific selector ensures the styling only affects the intended homepage banner

Outcome: The solution worked successfully, limiting the floating image to appear only on the homepage’s top image banner as intended.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

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;
  }
}
2

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! :rocket: (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!

1 Like
3

Wow! This is awesome. It works!

Thanks for your quick reply!