How to add my own custom background image

Highlighted
Shopify Partner
28 0 0

Ninthony you're a shopify prodigy.

0 Likes
Shopify Partner
28 0 0

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
Astronaut
1005 130 237

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 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
Shopify Partner
28 0 0

Everything worked perfectly. Really appreciate the help Ninthony!

0 Likes
New Member
1 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