Solved

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

Gijsvl
Excursionist
16 0 4

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-b269e66aad...

 

Any help is appreciated, thanks!

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5517 1328 1637

This is an accepted solution.

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

 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
5517 1328 1637

Hi @Gijsvl 

Do you mean like this? 

Made4uoRibe_1-1708532471879.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Gijsvl
Excursionist
16 0 4

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

Gijsvl
Excursionist
16 0 4

On the white sections of the webshop 🙂 thanks

 

Made4uo-Ribe
Shopify Partner
5517 1328 1637

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

 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Gijsvl
Excursionist
16 0 4

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.PNGheader.PNG

Made4uo-Ribe
Shopify Partner
5517 1328 1637

This is an accepted solution.

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

 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Gijsvl
Excursionist
16 0 4

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!

Made4uo-Ribe
Shopify Partner
5517 1328 1637

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!

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
5517 1328 1637

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com