Blockshop Theme - Change footer background image

[jakemattingley]

Hey! I want to change my footer background so it isn’t a straight line, similar to the image below. I have the shape/image ready to go. any idea what code is needed and where it needs to be placed in order to change the footer background for Blockshop theme?

Thank you

[namphan]

Hi @jakemattingley ,

You can follow the instructions, it will display fine.

[jakemattingley]

Hey thanks for replying.

I tried the code in a few spots but didn’t get any results.

"Actions > Edit code > Assets > base.css "

“Actions > Edit code > Assets > section-footer.css file”

I don’t see either of these options under my edit code sections..

can you tell me where to paste the code?

[DaisyVo]

Hi @jakemattingley ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

footer.section--footer .footer--root {
    background-image: url("image-link");
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[jakemattingley]

Hey thanks for replying!

Unfortunately I do not see any changed on the footer

[namphan]

Hi @jakemattingley ,

Please send the website link, I will check it for you

[jakemattingley]

www.vision-bored.com

[namphan]

Hi @jakemattingley ,

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

.section--footer{
    position: relative;
    margin-top: 50px;
}
.section--footer:before {
    content: '';
    position: absolute;
    top: -50px;
    width: 100%;
    height: 6rem;
    left: 0;
    background: var(--bg-color--dark);
    background-image: url(link file) !important;
    background-color: #fff !important;
    background-position: top center !important;
    background-size: cover;
}

[DaisyVo]

Hi @jakemattingley ,

May I ask for your store URL to check further?

Best,

Daisy

[jakemattingley]

Great! looks like its working for mobile, but not working for full screen. Maybe I can size the .png differently? any size tips to make this work?

[namphan]

Hi @jakemattingley ,

Please add code:

@media only screen and (min-width:768px) {
.section--footer {
    margin-top: 250px;
}
.section--footer:before {
    top: -250px;
    height: 20rem;
}
}

[jakemattingley]

This worked. Thanks!

[namphan]

Hi @jakemattingley ,

You’re welcome and happy to help you