Different background images for each page; no resources available?

Highlighted
New Member
3 0 0

I'm attempting to assign each page its own background, and almost all of the results I'm finding point to this page:

https://docs.shopify.com/themes/customization/colors-images-and-video/use-different-backgrounds

...which no longer exists.  This was referenced as recent as two or three months ago.  Anybody have any information on where this may have gone, and/or any other references to use for the background image problem?

Theme is Boundless, btw.

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
166 0 33

Hi there Chris,

This used to be a document that outlined how to do this by calling out specific pages with either your CSS or changing some class tags in your HTML. 

We've removed the document since, but you can still do this with some simple CSS. It will allow you to change backgrounds for your collection pages, or blog, or product pages and so on. All you need to do is add the following code to your CSS:

body#collections {background:blue;}

If you want to use a background image just upload your photo in your Settings > Files to get a URL and use the following code:

body#collections {background: url(https://yourURLhere.com);}

Obviously just reaplce the URL I have there with your URL for the background image. 

If you want it to appear on blog pages just change the word collections to 'blogs' and so on. 

Hope that helps!

Thanks

Phil Kowalczyk
Customer Success Guru
Shopify

0 Likes
Highlighted
New Member
1 0 0

Hi Philip,

Thank you for answering this question. Will you elaborate a little bit for me?

Where in my CSS should I add: 

"body#collections {background:blue;}"

Under style.css.liquid?

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
166 0 33

Hey Chris!

That's right. It can be in any of CSS files. If style.css.liquid is the one that you have just put it in the very bottom of that file and you should be all set!

Cheers

0 Likes
Highlighted
Tourist
5 0 1

Hi Philip, have a similar problem and would realy appreciate some help. I think things have changed a bot since 2016 and although i can add a background image to a page it adds it to all the pages, I cannot get it to be specific to a single page. 

 

Best,

0 Likes
Highlighted
Shopify Partner
1027 215 471

1. First, upload your background image. To do this, go to Themes > Template Editor > Assets > Add a new asset. For this tutorial, we are going to upload a background image called “background-image.jpg“.

 

2. Now we are going to create a class for this background image. Go into Template Editor > Assets > theme.scss.liquid. Add following code at the end of file:

body.background-class {    background-image: url({{'background-image.jpg' | asset_url }});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    background-size: cover; 
}

Be sure that the filename of the background image you uploaded appears in between the single quotes.

Note: The code above will stretch background images to the fit the size of the browser. If your background image is repeating, or you don’t want it to be stretched, you can adjust the code. See this page for assistance.

 

3. Finally, you’ll want to tell the theme to load this background image specifically for this page. Go back to Themes > Template Editor > Layouts > Theme.liquid. Look for the following code:

 

<body class=".....">

You’ll need to add the code like following:

 

<body class="..... {% if page.handle == 'about' %}background-class{% endif %} ">

Note: here, 'about' is page handle. you can change it according your requirement. To check page handle click here.

 

As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
New Member
3 0 0

Theme.liquid file is not available on my brooklyn theme. 

0 Likes
Highlighted
Excursionist
26 0 7

you can find theme.liquid under "Layout"

0 Likes
Highlighted
New Member
1 0 0

Unfortunately this doesn't work. No changes are visible. 

0 Likes
Highlighted
Shopify Partner
1027 215 471

@CalvinF 

 

Send me your store url, so I can check and assist you better.

Also, explain what exactly you did? and for which page you added background image?

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes