Help Needed: Making a Wave Background On Footer Fully Responsive

[Laust]

Hi everyone,

I’m working on customizing my Shopify store, and I’m trying to add a wave background to my footer that is both fully responsive and spans the entire width of the screen, regardless of the device size.

Here’s what I’m struggling with:

1. The wave background isn’t stretching to cover the full width of the screen on some devices.
2. I want the background to remain proportional and look consistent across all screen sizes.
3. The wave should always align to the bottom of the footer, and its height should adjust dynamically to ensure it looks great on all devices

Here’s the CSS I’m currently using:

/* Sikrer fuld bredde og ingen marginer */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Forhindrer horisontal scrolling */
  }

  .site-footer {
    position: relative;
    width: 100vw; /* Garanterer, at footeren fylder hele skærmens bredde */
    background: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 1440 600%22%3E%3Cpath fill%3D%22%2326AAE3%22 fill-opacity%3D%221%22 d%3D%22M0%2C192L80%2C186.7C160%2C181%2C320%2C171%2C480%2C186.7C640%2C203%2C800%2C245%2C960%2C250.7C1120%2C256%2C1280%2C224%2C1360%2C208L1440%2C192L1440%2C600L1360%2C600C1280%2C600%2C1120%2C600%2C960%2C600C800%2C600%2C640%2C600%2C480%2C600C320%2C600%2C160%2C600%2C80%2C600L0%2C600Z%22%3E%3C/path%3E%3C/svg%3E');
    background-size: cover; /* Sikrer, at baggrunden fylder hele bredden */
    background-repeat: no-repeat;
    background-position: bottom center; /* Sørger for, at bølgen er centreret */
    height: 60vh; /* Giver dynamisk højde baseret på skærmen */
  }

  /* Responsiv justering */
  @media (max-width: 768px) {
    .site-footer {
      height: 50vh; /* Reducerer højden for tablets */
    }
  }

  @media (max-width: 480px) {
    .site-footer {
      height: 50vh; /* Reducerer højden yderligere for små skærme */
    }
  }

Any help or suggestions would be greatly appreciated!
Thank you in advance for your support!

[Made4uo-Ribe]

Hi @Laust

Please, share your store URL with the background wave on footer. Thanks!

[Laust]

Hi @Made4uo-Ribe

Sure!
https://scandinavian-hair.dk/
Code: admin

[Made4uo-Ribe]

Thanks for the info, please remove the code that you add. And replace to the code below.

div#shopify-section-footer {
    position: relative;
}
footer.site-footer {
    background: #26aae3;
}

div#shopify-section-footer::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 0;
    bottom: 100%;
    width: 100%; /
    height: 300px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cpath fill='%2326AAE3' fill-opacity='1' d='M0,192L80,186.7C160,181,320,171,480,186.7C640,203,800,245,960,250.7C1120,256,1280,224,1360,208L1440,192L1440,600L1360,600C1280,600,1120,600,960,600C800,600,640,600,480,600C320,600,160,600,80,600L0,600Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 10;
    pointer-events: none;
    overflow: visible;
    padding-top: 200px;
}

.newsletter-section .page-width.text-center {
    padding-bottom: 100px;
}

.site-footer {
    padding-top: 0px;
}
@media only screen and (min-width: 1130px){
div#shopify-section-footer::before {
    position: absolute;
    top: -400px;
    padding-top: 300px;
}
    .newsletter-section .page-width.text-center {
    padding-bottom: 200px;
}
}
@media only screen and (max-width: 589px){
div#shopify-section-footer::before {
    position: absolute;
    top: -150px;
    padding-top: 100px;
}
    .newsletter-section .page-width.text-center {
    padding-bottom: 80px;
}
}

And Save.

result:

Mobile

Tablet

desktop.

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

[Laust]

Hi @Made4uo-Ribe

Thanks for the help!

I’m doing something wrong but what?
I don’t get any wave only a colored box!

[Made4uo-Ribe]

Did you change the image url? Or you delete the image on the file? If i click the image it should show the wave. Now its totally full white, upload the image again and add the url.

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

[Laust]

Hi @Made4uo-Ribe *

The SVG is still intact
But instead of a wave being displayed, it’s just a blue box. Could it have something to do with the css code itself or what?
I have copied everything you sent and pasted into my theme.css.liquid

[Made4uo-Ribe]

Im not seeing the image anymore, I did see it when I click the url but now its not. Page 404

[Laust]

When you go to https://scandinavian-hair.dk/ ?
I’m a bit confused

[MRamzan]

Here is a complete solution for adding wave in your shopify store section.

Video Guide: https://youtu.be/lqvhTrNzKVc

#shopify-section-{{ section.id }} {
    transform: translateY(-102px);
    margin-bottom: -102px;
    --mask: radial-gradient(96.55px at 50% 136.5px, #000 99%, #0000 101%) calc(50% - 140px) 0 / 280px 100%, radial-gradient(96.55px at 50% -66.5px, #0000 99%, #000 101%) 50% 70px / 280px 100% repeat-x;
    -webkit-mask: var(--mask);
    padding-top: 100px;
    background: red;
}