Adding Background Image To Collection Page Only (Brooklyn theme)

mrjaengland
Explorer
68 1 15

Hi 

I'm really hoping someone can help. I have been searching online for some time for an answer on how to add a background image to a specif page (Collection) 

I'm using the brooklyn theme and have found a few answers, however, none that seem to work. 

I found the following thread however, after implementing the methods suggested, no changes seem to happen: https://community.shopify.com/c/shopify-design/how-to-add-my-own-custom-background-image/td-p/327450

Here is the collection page i’m hoping to add a background image to: https://www.gestured.co.uk/collections/box-size

It seems I'm not the only one looking for an answer and so really hoping someone can help! 

Huge thanks in advance, 


Replies 6 (6)

dmwwebartisan
Shopify Partner
12279 2546 3693

@mrjaengland 

Please share store URL

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mrjaengland
Explorer
68 1 15

Hey - Yeah of course... Here is the collection page i'm looking to add a background too: https://www.gestured.co.uk/collections/box-size

Thanks in advance!!! 

mrjaengland
Explorer
68 1 15

Update: I have figured out how to add the background but it applies across the whole site. 

I upload my image to Settings>files. 

I then added the follwing code at the bottom of timber.scss.liquid

body {

  background-image:url('https://cdn.shopify.com/s/files/1/0565/5923/9345/files/THIS_IS_THE_SIZE_WEBISTE_HOMEPAGE.jpg?v=16342...');

}


I then tried to add the following code to try and have it on the collections page only however, it didn't work.

id="{% if page.handle == 'collections/box-size' %} collections{% endif %}"

If anyone has any idea it would be much appreciated

Thanks again, 

dmwwebartisan
Shopify Partner
12279 2546 3693

@mrjaengland 

 Please Go to Online Store->Theme->Edit code then go to assets/timber.scss.liquid ->paste below code at the bottom of the file. 

.template-collection{ background-image:url('https://cdn.shopify.com/s/files/1/0565/5923/9345/files/THIS_IS_THE_SIZE_WEBISTE_HOMEPAGE.jpg?v=16342');}

.template-collection .site-header {
    background-color: transparent !important;
    padding: 15px 0;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mrjaengland
Explorer
68 1 15

Hey @dmwwebartisan  Thanks for this. 

The image worked however, it has enlarged so you only see the top left of the image? 

I have included 2 images below. How it looks with your method, and the original image. 

Thanks for your help so far, much appreciated. 

mrjaengland_0-1634299045411.png

mrjaengland_1-1634299092996.png

 



Kinjaldavra
Shopify Partner
2302 570 1422

hello @mrjaengland 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection {
    background-image: url(https://cdn.shopify.com/s/files/1/0565/5923/9345/files/THIS_IS_THE_SIZE_WEBISTE_HOMEPAGE.jpg?v=16342);
    background-size: cover;
}