Individual Page Background Image in Narrative Theme

Solved
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
Astronaut
875 104 193

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

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
New Member
9 0 0

https://fivethirteenstrength.com/ 

 

PW: cincystrong

 

Thank you 

0 Likes
Astronaut
875 104 193

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

Success.

Astronaut
875 104 193

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 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
New Member
9 0 0

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

0 Likes
Astronaut
875 104 193

No problem, glad it helped.

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

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

0 Likes