How to add my own custom background image

Shopify Partner
56 0 3

Ninthony you're a shopify prodigy.

0 Likes
Highlighted
Shopify Partner
56 0 3

I put in this code:

 

body {
background-image:url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/bgbeach.jpg?288');
}
@media (max-width: 767px){
background-image: url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/Untitled-2.jpg?407');
background-position: 50% 50%.
}

 

but my store is showing up with only product images in it:

 

https://jcnoy5kez97h4u8p-27272249428.shopifypreview.com

0 Likes
Highlighted
Shopify Partner
1281 169 403

Whoops, forgot to include the body element in the media query:

 

body {
background-image:url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/bgbeach.jpg?288');
background-size: cover
}
@media (max-width: 767px){
  body{
background-image: url('https://cdn.shopify.com/s/files/1/0272/7224/9428/files/Untitled-2.jpg?407');
background-position: 50% 50%;
}
}
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
Shopify Partner
56 0 3

Everything worked perfectly. Really appreciate the help Ninthony!

0 Likes
Highlighted
New Member
2 0 0

I have been trying to add my own background image to the theme that was provided to us, but every time I do what the discussions say, it just explodes the site, and pushes everything down. below is the code I would paste at the bottom of my theme.scss.liquid.

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; 
}
0 Likes
Highlighted
New Member
1 0 0
Step 3 does not work for me. Im using the free Supply Theme. I uploaded my image and pasted in theme.scss.liquid at the bottom but im not exactly sure where to paste step 3. Go back to Themes > Template Editor > Layouts > Theme.liquid. Look for the following code: Im not sure where to post the code because it has the body id and then the class below it. Can you provide me with more details please?
0 Likes
Highlighted
New Member
1 0 0

Hi! So i cannot find in theme.liquid where <body class is. I can see <body id. Is that the same?

0 Likes
Highlighted
New Member
2 0 0

Need help please

0 Likes
Highlighted
New Member
1 0 0

Hi, I want to make some change on my theme. I dont know where to find you email to email you. 

0 Likes
Highlighted
New Member
2 0 0
Contact me on this email please thank you
serviceclientlookfly.ca@gmail.com
Visit our store
https://Look-Fly.ca
--
Shop our Store
https://Look-Fly.ca
0 Likes