Why is my background video not aligned with products on my page?

Store Design
1

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/

BG.png
BG.png1469×869 189 KB

2

Hi @suoshie ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

#shopify-section-template--18097696702780__7eadbad0-db36-4fe5-8d0e-fea83253d87b {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#shopify-section-template--18097696702780__7eadbad0-db36-4fe5-8d0e-fea83253d87b.videoBackground .videoBox {
    height: 100%;
    max-height: auto !important;
}
#shopify-section-template--18097696702780__featured_collection .gradient {
    background: transparent;
}

I hope it would help you
Best regards,

Richard | PageFly

3

hi i did what you said however it still looks the same. Here is the preview link: https://hk9mldhvuepfc7f5-71160791356.shopifypreview.com

4

Hi @suoshie ,

Looks like the preview link has a different ID than the live link you sent above.
You can change this code for the preview link above:

#shopify-section-template--18105024217404__7eadbad0-db36-4fe5-8d0e-fea83253d87b {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#shopify-section-template--18105024217404__7eadbad0-db36-4fe5-8d0e-fea83253d87b.videoBackground .videoBox {
    height: 100%;
    max-height: unset !important;
}
#shopify-section-template--18105024217404__featured_collection .gradient {
    background: transparent;
}

PageFlyRichard_0-1677079244242.png
PageFlyRichard_0-1677079244242.png1648×701 211 KB

I hope it would help you
Best regards,

Richard | PageFly

5

the preview is a duplicated version of the published theme. Regardless i have pasted that code onto the published theme but some reason it still is not showing up. Here is the link: https://c1e46d.myshopify.com/collections/all

6

nevermind it works thank you!

7

The background is not showing on mobile version can you fix this please?

8

Also on desktop the background only shows when the website link is https://c1e46d.myshopify.com/

when i click on another page and go back to products page the link turns to https://c1e46d.myshopify.com/collections/all and the background no longer shows.

9

Hi @suoshie ,

I checked.

PageFlyRichard_0-1677155623840.png
PageFlyRichard_0-1677155623840.png353×752 130 KB

Looks like it’s still working

You already have the solution, right?

10

It works but i want to remove the black boxes around my products. How can i do this?

11

Hi @suoshie ,

I checked and it seems there is a solution, right?