How do I make a custom background on specific pages

Store Design
, , ,
1

I recently tried to apply some custom code to my ‘Dawn’ theme which adds a custom image as the background to my base.css . However, on my landing page, the image I choose shows up in the background of buttons and containers which ruins the design of my website. A good example of what I am trying to do is on this website → ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■.

My website URL is → https://aurora-apparel-1.myshopify.com/

Any help would be great thanks.

2

Hello @MITTON1 ,

Welcome to Shopify Community! Happy 2023 :slightly_smiling_face:

To add a similar video like ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■. to your website you need to add html and CSS code to your website.

Add below HTML code to your theme.liquid file in the before :

CSS code :

body {
  position: relative;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
}

Result video :

https://www.loom.com/share/4cf39e67574e426aa6b6f67b6457b74b

Let me know if requires further assistance !

3

Hey, unfortunately, the video in the background of the example website is not the one Im trying to use. The video I’m trying to use is https://cdn.shopify.com/videos/c/o/v/d331450060cd4a659a67c705f35f94a1.mp4 . Thanks

4

To do that you can replace the video URL with HTML code :
5

Im sorry man but the code isn’t working for me, I put the code theme.liquid and base.css but it hasn’t changed anything on my website. Thanks