Custom Background

Shopify Discussion
1

Is there a way to make my entire background for this page including the header and footer this video on loop? https://cdn.shopify.com/videos/c/o/v/a4fe4cb49f7345a8963a46da6b4df3d5.mp4

If anyone could help that would be perfect.

2

Use CSS to position the video as a full-page background and layer the content over it.

Video Background /* Reset margin and padding */ body, html { margin: 0; padding: 0; overflow: hidden; height: 100%; }

/* Full-screen video background /
#background-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; / Sends the video to the background */
}

/* Page content styling /
#content {
position: relative;
z-index: 1; / Ensures content is above the video /
color: white; / Text color for visibility */
text-align: center;
padding: 20px;
}

/* Header and footer styles /
header, footer {
background-color: rgba(0, 0, 0, 0.5); / Semi-transparent background */
color: white;
padding: 10px 0;
}

Welcome to My Page

Your main content goes here.

© 2024 My Website

How It Works:1. Video: The

  1. CSS Inline: Styles are included directly within the tag in the section.
  2. Content Structure: #content contains your header, main content, and footer, all styled to appear above the video.

You can copy and paste this into a .html file and open it in your browser to see the video background in action. Let me know if you need further adjustments!