Dawn theme: Add a section with image/svg on top of the footer

[MT91]

Hello!

I'd like to add this wave "background"/svg-file as shown in the picture, how can I achieve this?

Thanks in advance!

[namphan · Accepted solution]

Hi @MT91,

Please change code:

.newsletter{
    position: relative;
    margin-top: 50px;
}
.newsletter:before {
    content: '';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 6rem;
    left: 0;
    background: var(--gradient-background);
    background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png) !important;
    background-color: #fff !important;
    background-position: top center !important;
    background-size: cover;
}

[namphan]

Hi @MT91,

Do you have this background image? You can use CSS background code for it. 

You have experience with code?

[MT91]

Hi Nam,

Yes, I have the bg image (https://cdn.shopify.com/s/files/1/0845/9491/7644/files/1.png?v=1722347735) and I also know a bit CSS and HTML. Not liquid though. I'm new to shopify. How can I add this above the footer? 

[namphan]

Hi @MT91,

You need to create a transparent background image with wavy lines on top, like they do, I will help you add code for it

[MT91]

Hi Nam,

I realized that shopify doesn't support SVG. I've now created a png-file with transparent background and asymmetrical waves (not like in the first picture I showed). I'm unsure about the size but I want the background to cover the whole width on my shop responsively without getting "pixelated". Do you think 3000px width is too large? 

Here's the file: https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png?v=1723813420

[namphan]

Hi @MT91,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

footer:before {
    content: '';
    position: absolute;
    background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png?v=1723813420);
    top: -30px;
    width: 100%;
    height: 50px;
    left: 0;
    z-index: 3;
    background-size: cover;
}

[MT91]

Hi Nam,

I pasted the code into to base.css file but nothing happens.

[namphan]

Hi @MT91,

Please send me the store link, I will check it

[namphan]

Hi @MT91,

Please add code:

.newsletter{
    position: relative;
    margin-top: 30px;
}
.newsletter:before {
    content: '';
    position: absolute;
    top: -30px;
    width: 100%;
    height: 6rem;
    left: 0;
    background: var(--gradient-background);
    background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/1.png) !important;
    background-color: #fff !important;
    background-position: top center !important;
    background-size: contain;
    background-repeat: repeat-x !important;
    transform: rotateX(180deg);
}

[MT91]

Oh it works! But the background image is wrong. This is the correct one: https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png

Can you help me adjust the code so the background image covers the whole width and doesnt repeat? 

[namphan · Accepted solution]

Hi @MT91,

Please change code:

.newsletter{
    position: relative;
    margin-top: 50px;
}
.newsletter:before {
    content: '';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 6rem;
    left: 0;
    background: var(--gradient-background);
    background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png) !important;
    background-color: #fff !important;
    background-position: top center !important;
    background-size: cover;
}

[MT91]

Thank you! I adjusted the code a bit and now it looks as I desired! 😄

There's one last thing: I'd like to have a brown background color with the copyright text as in the picture. But when I try to change the background color for the copyright text the background color for the payment icons also changed. Can you help me with this?

[namphan]

Hi @MT91,

I checked and it shows fine, can you explain more about it?

[MT91]

I'm so sorry. I realized the image I wanted to show you didn't get uploaded. This is what I mean. Thanks!

[namphan · Accepted solution]

Hi @MT91,

Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:

.footer {
    padding-bottom: 0 !important;
}
.footer__content-bottom-wrapper:nth-child(2) {
    max-width: none;
    padding: 0;
    background: #665145;
    color: #ffffff;
    padding-bottom: 12px;
    margin-top: 12px;
}

[namphan]

Hi @MT91,

If you have any questions, you can contact me directly.
Nice to meet you 😊