Different background images for each page; no resources available?

Excursionist
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

0 Likes
Shopify Partner
1027 215 472

@photoballard 

 

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,

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

Bummer, doesn't work

 

0 Likes
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
0 Likes
Excursionist
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 %} ">
0 Likes
Excursionist
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? 

Thanks, 

 

0 Likes
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. 

0 Likes
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?

Cheers

Tim

0 Likes