Hello I have a image banner I want to have another section over the top of it its called “SS-Product Ingredients #2” All I want to do is to place that over my image banner! Please help.
Topic summary
A user is attempting to overlay a section called “SS-Product Ingredients #2” on top of an image banner on their Shopify store page. They want the content section to appear over the banner image rather than below it.
Initial Solution Attempted:
- A CSS solution was provided to set the banner image as the background of the ingredients section
- This resulted in the background appearing too zoomed in
- The user needs a reusable solution that works across multiple pages with different backgrounds
Current Approach:
- CSS code was provided using
position: absoluteandbackground-color: transparentto move the section up and make it overlay the banner - The solution involves making the section transparent so the banner shows through
Status:
The issue remains unresolved. The user reports the CSS is still not working as intended and has shared a screenshot showing the problem persists. They are seeking a more universal CSS solution that doesn’t require hardcoding image URLs for each page.
Can you share your store url so that we can check and help you
https://two3solutions.com/pages/testing-better-work
Hello! this is the URL – this is a sample page but it will be the same sections. I want to make the section below the image banner on top of the image
Hello, Can you show how you like . because if we put the content above the image the image is hide.
I think it will be a better solution if you use background of the bellow section like above without forcely move it top
Hello, I’m not sure how to show you. All I want is for the background for the section that says "pallet racking and the “Mystical Herb” the section is called SS-Product Ingredients #2. I want that section to have the background of the image shown above it. Whatever you think is easier!
If you use this css in your section CSS area
.section-template--24221993664812__ss_product_ingredients_2_wtGG9V{
background-color: #FCF8F5;
background-image: url(https://two3solutions.com/cdn/shop/files/Pallet_Racking_Warehouse.heic?v=1738462694&width=3840);
}
It will look like
Hope this is what you are looking to do
is there a standard CSS that will work for my other pages? Because I want to do this on all my others – also the background is very zoomed in. There no way I can just place the product ingedients section on top of the image banner??
yes , if you put in section custom CSS area it will pick that section class wise , the image position and other can be set, if you want to optimize after add
Its still not working – is there another CSS you can provide?
For example is there a CSS that can just make image panner background of product ingredianc with no URL just cause I will be doing this on many different pages with different backgrounds
oh, in that case use bellow css, then your bottom section will move up and background with transparent
.shopify-section {
position: absolute;
top: 80px;
background-color: transparent!important;
width: 100%;
}
.section-template--24221993664812__ss_product_ingredients_2_wtGG9V {
background-color: transparent !important;
}
