How can I use a custom background image with the Whisk theme?

Store Design
, , , , ,
1

Hi all,

I’ve tried a lot of stuff, but I just can’t seem to get it right.

I would like to use a custom background image on my website.

I’m using the Whisk theme.

https://beestn.nl

Password: 123

Custom image: https://cdn.shopify.com/s/files/1/0795/0152/5323/files/website-bg_01128c66-6d1c-4138-be9a-b269e66aad6c.jpg?v=1708505270

Any help is appreciated, thanks!

2

Hi @Gijsvl

Do you mean like this?

Made4uoRibe_1-1708532471879.png
Made4uoRibe_1-1708532471879.png1880×643 115 KB

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:

body.password-layout.theme-style--soft {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/0152/5323/files/website-bg_01128c66-6d1c-4138-be9a-b269e66aad6c.jpg?v=1708505270');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}
section#shopify-section-template--20692095009099__main .color--underneath-default {
    background: transparent;
}

And Save.

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

3

Hi! Thats perfect, but I meant throughout the whole website. Not on the password page. Thanks!

4

On the white sections of the webshop :slightly_smiling_face: thanks

5

Oh, i thought only for password page. Let me check again.

6

Check this one. Same instruction.

body.page-layout.body--template-index.theme-style--soft {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/0152/5323/files/website-bg_01128c66-6d1c-4138-be9a-b269e66aad6c.jpg?v=1708505270');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

main#MainContent * > :not(a.button) {
    background: transparent;
}
.color--underneath-default {
    background-color: transparent;
}

And Save.

Result:

Made4uoRibe_0-1708545689807.png
Made4uoRibe_0-1708545689807.png1900×704 209 KB

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

7

Works almost perfectly! The image doesnt show up in the white sections in the header and footer. Do you know how to fix that?

Also, if possible, i would like the image in every page of the website, not only the homepage.

I really appreciate the help!!!

footer.PNG
footer.PNG1126×248 42.3 KB

header.PNG
header.PNG870×332 130 KB

8

In the banner, you need to take out the blurry design so we can add it. Please replace with this code again, i didnt notice that your body selector can call specific pages.

body.page-layout {
    background-image: url('https://cdn.shopify.com/s/files/1/0795/0152/5323/files/website-bg_01128c66-6d1c-4138-be9a-b269e66aad6c.jpg?v=1708505270');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}
main#MainContent * > :not(a.button) {
    background: transparent;
}
.color--underneath-default {
    background-color: transparent !important;
}

And Save.

Result:

Made4uoRibe_0-1708612384080.png
Made4uoRibe_0-1708612384080.png1160×776 215 KB

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

9

That looks great! So it’s not possible to let the texture flow into the banner? It’s a webp so the blurry design should be transparent.

If not, no worries and thanks alot!

10

Nope I cant change it, I already try to change. The image banner have different design which the background is overlay not on the back.

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