How do I change the background image of my store?

New Member
5 0 0

Hello, I been trying for a few days now to change the background image of my store to a repeating tiled image. This shoppify store shows basically what I mean... Its not my store. https://www.4everfunky.com/

I found various tutorials both online elsewhere, like five at least, and several here in this forum. Nothing has worked yet, even after trying the various codes in different places. The most recent tutorial I can find is here...

https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-use-a-background-picture-270827

However, unless I'm doing something wrong, it didn't work. I realize its not for a repeating tiled image, but figured if I changed it from no-repeat, to repeat, it would work. Anyway, the article is two years old and says "outdated" at the top, so I'm not surprised. 

Any help would be greatly appreciated! 

I'm currently using Launchpad-Star theme, and I've already uploaded the image I want into "assets". 

Thanks in advance. 

0 Likes
Shopify Staff
Shopify Staff
537 0 71

Hey, Erik!

Try adding this code to the end of your theme.scss.liquid (in your assets folder):

  body, header, footer {
    background-image: url("{{ 'Background.JPG' | asset_url }}");
  
      background-repeat: repeat;
   
      background-size: cover;
      background-position: center center;
  
  }

Obviously, remember to rename the file there to your own asset's file name. Let me know if that does the trick!

Savannah | Shopify Guru
support@shopify.com

0 Likes
New Member
5 0 0

Thank you so much Savannah!

It did work, and I also learned a little bit with how the custom code area works. I thought the "Preview" button would show me a preview of the site before saving it? It doesn't work that way. New code must be saved first, then you can preview it. Sort of confusing, but now I know. I wonder if some of those other tutorials would have worked if I tried it that way.  

Thanks again, I've been trying to do this for two days now! Greatly appreciated!  

0 Likes
Shopify Partner
1 0 0

Hi.

Your tip for changing the background works, but part of my header still has a background colour. 
see attached.

How do I get rid of that?Screenshot 2019-02-28 at 13.07.16.png

0 Likes
New Member
3 0 0

Do you know how to make the background appear on the home page only?

0 Likes