What do the different background image settings mean?

You can upload a background image for your store by going to the "Storefront" tab and then choosing "Banner and Background Image"

If you choose to have a background image in your store, you can change the settings for how it displays from the "Storefront" tab in your Admin Panel. Choose the "Theme" section and then scroll down to the "Styles" section.

You can set a plain background color using the "Body Background" setting.

Right at the bottom there is a setting to hide the background image completely. If you have set a background color this will still show even if you hide the background image.

Background Image Repeat
  • Repeat - This means your image will be tiled across the screen. No matter how big your image is, it will be repeated as often as is needed to completely cover the viewer's screen, no matter how big the screen.
  • Repeat X - This means, if the viewer's screen is wider than your image, the image will repeat itself across the screen.
  • Repeat Y - This means as the viewer scrolls down through your store, when the bottom of your image is reached it will repeat again.
  • None - This means your image will only be displayed once on the page. If it isn't big enough to fill the screen, your background color will show when the image has run out.

Background Image Position
If you don't have your background image repeating, this will determine where the image is placed on the viewer's screen. Bear in mind, different people use different sized screens so, unless your image is centered, it will appear in a different place depending on the screen it's viewed on.

Background Attachment
Scroll - This means, as the viewer scrolls down through your store, your background image will move up with the page
Fixed - This means the background image will stay fixed in place, even if the viewer scrolls through your store, although your store page will move up, the background image will not.

If you want to easily try out these different options and see how they affect your store, just use the design toolbar.

Did you find this article helpful?