Individual Page Background Image in Narrative Theme

Solved
Highlighted
New Member
9 0 0

I am still unable to get this to work. I have the code pasted in exactly as above and double checked the URL with the CDN and no background image on my page.. just the background color:

 

Screen Shot 2019-05-21 at 5.28.57 PM.png

 

Here is what is is page.liquid:

 

{% if page.handle == "facility" %}
<style>
body#strength-amp-conditioning-and-powerlifting-facility{
background-image: url('https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png?455");
}
</style>
{% endif %}

 

What if I want to just use the same background image for all pages in the Narrative theme? Let me know if you can login to my store to help with this.

0 Likes
Highlighted
Shopify Partner
1364 185 436

Can you post a link to your store and password if it's password protected? 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

https://fivethirteenstrength.com/ 

 

PW: cincystrong

 

Thank you 

0 Likes
Highlighted
Shopify Partner
1364 185 436

Alright so your issue was that the background color was being applied on a different element. It's used on the body as well as the content-for-layout main element. So just put this in the bottom of your theme.scss.liquid file in your assets folder:

 

 

body#five-thirteen-strength-and-powerlifting .content-for-layout {
    background-color: green;
}

Where green can be any hex color you want, just be sure to include the hash like:

 

body#five-thirteen-strength-and-powerlifting .content-for-layout {
    background-color: #65ad00;
}

Click here to use google's hex color picker

 

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

That makes sense, thanks!

 

So if I want to make it an image instead of a color I can put in the following and that works:

 

body#five-thirteen-strength-and-powerlifting .content-for-layout {
    background-image: url(https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png?512);
}

Now how do I make it so that it doesn't repeat as you scroll down (like in the second image below)?

 

Screen Shot 2019-05-22 at 2.29.09 PM.png

 

 

Screen Shot 2019-05-22 at 2.29.20 PM.png

0 Likes
Shopify Partner
1364 185 436

This is an accepted solution.

Use the background-repeat property:

 

body#five-thirteen-strength-and-powerlifting .content-for-layout {
    background-image: url(https://cdn.shopify.com/s/files/1/0045/4921/4298/files/Facility_Background.png?512);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

So that will not repeat and that is with a fixed property so it will stay in place.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
New Member
9 0 0

This worked, thank you! Appreciate all the time and help.

0 Likes
Highlighted
Shopify Partner
1364 185 436

No problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
4 0 0

This thread has been so helpful. Exactly what I was seeking to accomplish. Thank you!

0 Likes
Highlighted
New Member
1 0 0

Hey guys,

 

I had the same issue but thanks to all the suggestions I made it on my end successfully too.

 

Thanks!

0 Likes