Remove any background color after adding video background - password page - dawn 12

Store Design
, ,

Topic summary

A user needed help removing a white/black background block appearing at the bottom of their password page after adding a background video to their Dawn theme store.

Problem Details:

  • Background video added with transparent header and footer
  • Unwanted colored block remained visible at bottom of page
  • Using latest Dawn theme version

Solutions Provided:
Multiple community members offered CSS code solutions targeting:

  • .videoBackground .videoBox elements
  • Height and padding adjustments
  • Mobile responsiveness (max-width: 767px)

Resolution:

  • User confirmed Made4uo-Ribe’s solution worked successfully
  • Solution involved adding CSS to base.css/style.css/theme.css file
  • Code set video box height to 100% and removed padding
  • Marked as resolved with thanks to the community
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello! Love this community and all the solutions you give. Could some one please help me remove the remaining block of background color on my PASSWORD PAGE? I am using Dawn latest version I have inserted a background video & made header transparent & footer hidden but there is still a white or black (I can change color depending on background color) on the bottom. How can I remove this or make it transparent to see the complete video.

Please see here:
https://zhadere.com/password

1 Like
2

Hey @renatavilland ,

You can use this CSS code.
Apply it in the base.css, theme.css or styles.css in the Assets folder after clicking Edit Code on your theme options.

.videoBackground .fullscreen-video-wrap {
    max-height: 100vh;
    height: 100vh;
}

.modal__content {
    background-color: transparent;
    color: white;
}

button.password-button.button.button--outline {
    color: white;
}
3

Hello @renatavilland

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.videoBackground .videoBox { min-height: unset !important; max-height: unset !important; height: 100% !important; } @media screen and(max-width: 767px){ .videoBackground .videoBoxInfo { padding:unset !important; } }

techlyser_web_0-1706109891429.png
techlyser_web_0-1706109891429.png1264Ă—447 436 KB

4

Hi @renatavilland

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
    padding: 0px !important;
}
}
.videoBackground .videoBox {
    min-height: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
}

And Save.

Result:

Made4uoRibe_0-1706111941714.png
Made4uoRibe_0-1706111941714.png1477Ă—830 212 KB

Made4uoRibe_1-1706111957764.png
Made4uoRibe_1-1706111957764.png553Ă—828 389 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hello this worked! Thank you so much. Definitely checking out Made4uo.com