Choose A Background Image

A background image can have a strong visual impact on your store. It can radically change its look and feel. Or it can subtly enhance the character of the store. You can use a photograph, an illustration or if you prefer, a pattern.

Different themes will provide different levels of control for the background. Some will come with a set of backgrounds or textures included from which you can choose. Let's take a look at some of the settings commonly found for controlling the background.

Page background color: This is a simple choice of what color you want in the background of the page. It can be useful even if you have a background image or pattern, as it defines visually the page while the background image loads. Sometimes the background color is chosen to blend seamlessly with the background image. In the example above, the page background color has been set to #bababa, a medium grey. Notice how the grey fills in nearly everywhere. This is because the content area is set to be transparent so the background comes through.

Content background color: The content area is the part of the page that contains the content (shop name, navigation, collections, products, etc.) of your store. With many themes, you can also choose its color. On some themes, New Standard for example, the content area can have a transparent background so that what is behind comes through. This is controlled by the "Content area transparent" checkbox in the "Style - Colors" settings in that particular theme. It's difficult to make text work on a strong background image so this is only really recommended for light colors or very subtle patterns.

On the screenshot above the content background color has been set to white (#ffffff) and the content area is no longer transparent. You can see clearly the page background in grey and the content background in white.

Background image: With this setting, you can choose the file on your computer that you want to use as the background. In general, for a photo you'd be best off to use a file in JPG format, one that has been optimized for the web. It's tricky to choose the best size for a background image as nearly everyone browses the web with a different screen size. A width of more than 1700 pixels should cover the majority of possibilities.

Use background image: There is usually a checkbox or a dropdown with which you can activate or deactivate the background image. For New Standard there is a checkbox called "Use background image?" The background image will not show unless this has been checked. Now I have added the photo of the tree leaves as a background image and the content area is set to be not transparent.

Fix background position: New Standard comes with the option to fix the background position. With this setting activated, when you scroll up and down the page, the background image will remain in the same position. For most screens, with this option checked and a big enough image, you will avoid the need for the image to be repeated. Here I have set "Fix background position" so that the background image stays fixed when I scroll down the page. I have scrolled down the page but you can see the background has not moved if you compare it to the screenshot above.


Repeat and position: In some cases, for example for patterns, you will want to repeat the background image in a tile-like pattern. With the repeat control, you choose if you want the image to be repeated horizontally or vertically. The position setting sets the initial position of the background image. If the image is being repeated then it will repeat from that position. On this variation, the final one, I have put in a background pattern that I downloaded from Subtle Patterns. The pattern is repeated both horizontally and vertically and has a background position starting at the top left.

There are many excellent sites where you can find attractive patterns. Subtle Patterns has a great choice of free and subtle patterns. The creators of the New Standard theme recommend the Noise Texture Generator for creating subtle patterns. For those that are looking for something less subtle, there are many other great sites.