Adding Background Image To Collection Page Only (Brooklyn theme)

Store Design
1

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,

2

@mrjaengland

Please share store URL

3

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!!!

4

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=1634286728’);

}

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,

1 Like
5

@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;
}
6

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_0-1634299045411.png1762×785 137 KB

mrjaengland_1-1634299092996.png
mrjaengland_1-1634299092996.png1070×602 303 KB

7

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;
}