Adding multiple background-images to different pages.

New Member
8 0 0

This code works if I want to add a background image to my contact page:

(upload asset image)
theme.scss.liquid:
body.background-class { background-image: url({{'vintage-woman-phone-operator-calling_3.jpg' |
'https://img.elephantjournal.com/wp-content/uploads/2016/09/vintage-woman-phone-operator-calling.jpg'; }});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

theme.liquid:
<body class="..... {% if page.handle == 'contact-big' %}background-class{% endif %} ">


However, If I want to add more background images to different pages, how would I have to modify this code?

 

This code works for one background image on one page, but I can't get it to work for multiple background images on different pages.

0 Likes
Shopify Partner
852 86 130

You can use case/when control flow - https://help.shopify.com/en/themes/liquid/tags/control-flow-tags#case-when - and have a dedicated class for each page specifically and match on multiple page.handle.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Shopify Partner
15 2 2

Hi, You will do easily see code: {{page.handle}}

 

theme.liquid:
<body class="..... {{page.handle}}">

 

So class every page change as your page handle , For example your page title "Contact Us" so class should be .contact-us

 

You will add css file something like that

.contact-us{

background-image: url( {{'vintage-woman-phone-operator-calling_3.jpg' | asset_url });
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;

}

Smae think about us page

.about-us{

background-image: url( {{'vintage-woman-phone-operator-calling_3.jpg' | asset_url });
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;

}

 

 

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes
Highlighted
New Member
8 0 0

ok

 

In theme.liquid I have added:

<body class="..... {% if page.handle == 'contact-big' %}contact-big{% endif %} ">
<body class="..... {% if page.handle == 'why-you-truly-care-big' %}why-you-truly-care-big{% endif %} ">

 

In theme.scss.liquid I have added:

.contact-big{ background-image: url({{'vintage-woman-phone-operator-calling_3.jpg' |
'https://img.elephantjournal.com/wp-content/uploads/2016/09/vintage-woman-phone-operator-calling.jpg' }});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

 

.why-you-truly-care-big{ background-image: url({{'vintage-woman-phone-operator-calling_3.jpg' |
'https://img.elephantjournal.com/wp-content/uploads/2016/09/vintage-woman-phone-operator-calling.jpg' }});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

 

The background picture displays on the first page (contact-big), but it will not display on the second page (why-you-truly-care-big).

0 Likes
Shopify Partner
852 86 130

There are different ways to approach this, but just to keep code adjustments to minimum, adjust your code so it reads:

{% if page.handle == 'contact-big' %}<body class="..... contact-big">{% endif %}
{% if page.handle == 'why-you-truly-care-big' %}<body class="..... why-you-truly-care-big">{% endif %}

You can also use else/if constructions or case/when as I mentioned in my first post, but again, tens of ways to approach this.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Shopify Partner
15 2 2

Hi,

Might you have conflict class so you add suffix prefix? Also, make sure your page handle is correct, Go your page from Shopify dashboard click on page then scroll down  and click Edit website SEO http://prntscr.com/phdmfk

 

theme.liquid:
<body class="..... background-{{page.handle}}">

 

So class every page change as your page handle , For example, your page title "Contact Us" so class should be .contact-us

 

You will add css file something like that

.background-contact-us{

background-image: url( {{'vintage-woman-phone-operator-calling_3.jpg' | asset_url });
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;

}

Smae think about us page

.background-about-us{

background-image: url( {{'vintage-woman-phone-operator-calling_3.jpg' | asset_url });
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;

}

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes
New Member
8 0 0

Thank you.

 

Both background images now display.

0 Likes
New Member
2 0 0

Hello - just to jump in on this thread - I have successfully added a background image and linked to page handle but would like another background image on the other side of the page - can I do this? 

Thank you

0 Likes
Shopify Partner
15 2 2

Hi,

You can do this but you need to find out exact selectors.

Thank you

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes