A user is experiencing a layout issue where a video background on their product page appears separated from the product display instead of staying behind it as intended.
Proposed Solutions:
Two community members offered CSS-based fixes:
HauNT’s approach: Navigate to Theme → Edit Code, locate the base.css file, and add custom CSS targeting specific Shopify section IDs. The code sets position: absolute, z-index: 1, transparent background color, and zero positioning values for the featured collection gradient element.
PageFly-Victor’s approach: Add code to the theme.liquid file before the closing </body> tag (specific code snippet appears corrupted in the original post).
Both solutions involve editing theme files directly and require basic CSS knowledge. The issue appears related to CSS positioning and z-index layering of Shopify section elements. No confirmation yet on whether either solution resolved the problem.
On my product page i have a video background, however the background is separated from the products as shown in the photo. How do i make the video background stay behind the products and not separating itself?
SHOP URL: https://c1e46d.myshopify.com/
PRODUCT PAGE: https://c1e46d.myshopify.com/collections/all
Please help me fix this problem for both shop url and product page links as it directs you to the same page but through different links.
Step 1: Go to Theme => Edit Code
Step 2: Find base.css file and add this code at the end of the file
#shopify-section-template--18243795452220__product-grid,
#shopify-section-template--18243795747132__featured_collection {
position: absolute;
z-index: 1;
background-color: transparent;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#shopify-section-template--18243795747132__featured_collection .isolate.gradient {
background-color: transparent;
}
Hi @HauNT
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly