How can I set a looping video as my entire website background?

Store Design
, , ,

Topic summary

A user working with Shopify’s Dawn theme wants to implement a full-screen looping video background across their entire website, eliminating white borders currently visible around the video.

Current Setup:

  • Video element is placed in the theme.liquid file
  • CSS includes basic positioning (fixed, z-index: -1, 100% width/height)
  • Video hosted on Shopify CDN with autoplay, muted, loop, and playsinline attributes

Proposed Solutions:
Multiple community members offered CSS-based fixes:

  • Remove section backgrounds: Replace existing CSS to eliminate background colors from specific sections
  • Target header/color elements: Add background-color: transparent !important to header wrapper, color background, and quick-add submit classes in base.css
  • Modify existing code structure: Adjust the current implementation’s markup and styling

All responses suggest CSS modifications to achieve full-screen coverage. The discussion remains open as the original poster hasn’t confirmed which solution worked or if the issue is resolved.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I need the entire websites background to be the video that is looping in the background. I do not want any of the white boarders. I am using the dawn theme.

xenesis_0-1691963402948.png
xenesis_0-1691963402948.png1708×677 50.5 KB

xenesis_1-1691963443061.png
xenesis_1-1691963443061.png1194×550 372 KB

Here is the code for the background:

class=“gradient{% if settings.animations_hover_elements != ‘none’ %} animate–hover-{{ settings.animations_hover_elements }}{% endif %}”>

{% endif %}

#background-video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1; }

this is placed in the theme.liquid file

My site can be viewed here: https://fe58c6.myshopify.com/

2

Hi @xenesis

This is David at SalesHunterThemes.

Thank you for your question.
You can try to replace this css code instead of your code to remove the background for section as you want.
3

Hi @xenesis

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
.header-wrapper, .color-background-1, .quick-add__submit {background-color: transparent !important;}

Regards,

San

4

Hello @xenesis ,

You can modify the provided code like this:

Let us know if you can make it

Transcy.