Different background images for each page; no resources available?

20 1 1

I want to add a background image to just my blog post, is that possible. Can I add code to just the blog post

Shopify Partner
1027 215 472



Yes, you can add background image to just Blog page as well as Article page. Check my previous reply and follow the steps:

If you want to add background image for Blog listing page then use following condition to add class in <body> tag (step 3):

<body class="..... {% if template contains 'blog' %}background-class{% endif %} ">

If you want to add background image for Article page then use following code:

<body class="..... {% if template contains 'article' %}background-class{% endif %} ">

I hope it will help you.


Thank you,


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
20 1 1

Bummer, doesn't work


Shopify Expert
10008 116 1844

@photoballard wrote:

Bummer, doesn't work


What doesn't work? What code did you try?
Always best to overshare details so you've got more chances of getting the help you need.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
20 1 1

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 %} ">
20 1 1

Steps 1 and 2 are very straight forward, step 3 is confusing.


My code for the section described looks like this.


<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{% if template.name != blank %}{{ template.name }}{% else %}none{% endif %} data-animations">

 <a class="visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

 {% section 'header' %}


the code on my site read <body id  not <body class


Im missing something here

New Member
2 0 0

Hey guys, 

Just trying to build my site now. 

Can you have multiple body backgrounds for different images on webpage? 



New Member
1 0 0

photoballard is correct. Step 3 is confusing. I have searched line by line and can not find body class. There is however, a body ID after the header area. 

Also, are the elipses in the code you posted suppose to be there? Are we copying that code exactly or are you simply omitting code that is already in place? Can you further explain? Im working with the boundless theme. 

New Member
4 0 0

So to complicate the question a little, I would like to put a full width image on my 404 page, and was applying the above code, when i discovered the 404 page doesn't actually have a handle! How would i tackle that?