Modular Theme: Individual page background Image

Tourist
33 0 1

Can anyone take me through the steps on how I can make my background an Image from my PC for individual pages?

0 Likes
Astronaut
887 107 198

Your pages should have a unique body id that you can target to add the background image, or you can do it in style tags in the html editor when you create the page. For instance if you have a page called "About Us" it should have a unique body id like:

 

<body id="about-us" class="template-page">

Which you can target with css:

 

body#about-us {
background-image: url(link-to-your-image.jpg);
}

Then there's other things to consider, like do you want the background repeating, do you want it fixed and covering the whole page, etc.

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

Okay, thank you for that!

 

So I would like to do this to the homepage for instance, add a fixed image that fits the entire homepage. I have it saved as a JPG on my computer. How do I execute this? 

0 Likes
Highlighted
Astronaut
887 107 198

Go to settings in the bottom left of the admin, then go to Files. There you can upload anything you'll want to include on your site like images, videos, pdfs, whatever. It'll give you a link that you can copy next to the file after upload is complete. I'm not sure what your body id name is, so to make things uncomplicated you can go to Online Store > Themes > Actions > Edit Code on whichever theme you want to edit. This will bring up the code editor. Open your index.liquid file in your templates folder and add this to the top of the page:

 

<style>
body {
background-image: url('https://cdn.shopify.com/s/files/1/0561/0261/files/your-image.jpg?12340')
background-attachment: fixed;
background-size: cover;
}
</style>

And the background-image url should be your url that you got when you uploaded the image to your cdn.

 

 Depending on how the image appears on your page, it may not be exactly how you want it and you will have to add a background-position property

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

Hi again,

Thank you so much for your help.

 

I followed the instructions and have pasted as shown below however no results are showing when the asset is saved? did I do something wrong here?

index liquid.JPG

0 Likes
Astronaut
887 107 198

If you post a link to your store and password if it's password protected I can take a look. There may be another element on top of the body or something, as was the case with the last person who had asked this question.

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