1. Upload Background Image

As of Core Release 7, you can upload your background image via your basic “Customize” options as detailed in section 2.d. Upload a Background Image of support article How do I use the basic "Customize" options for my Big Cartel theme?

Alternatively you can upload your background image to the web and obtain the public URL for its location, as detailed in the support article How do I upload images or files for my Big Cartel page content?.

2. Add Background CSS Code

If you uploaded your image using your basic “Customize” Big Cartel admin controls:

• Locate your CSS edit controls and scroll to the BACKGROUND IMAGE section as detailed in the support article How do I locate and use my theme's CSS?
• Locate the existing background CSS code and edit it as detailed below (DO NOT edit the W variable, as this will already contain code to assign your image automatically)

If you uploaded your image to an external hosting space (e.g. Dropbox, TinyPic, etc.):

• Navigate to your Big Cartel shop’s custom style coding area as detailed in the support article Where do I add custom style coding in my Big Cartel theme controls?
• Copy the following background CSS code into the custom style coding area and edit it as explained below

The background CSS code:

body {
background-image: url('W');
background-repeat: X;
background-position: Y;
background-attachment: Z;
background-size: N;
}

Note that we are styling the HTML element body which is the containing box for all of your shop content. In this example code, the values W, X, Y, Z and N should be set as follows:

1. You can also specify A as a pixel or percentage value from the left of the browser window and B as a pixel or percentage value from the top of the browser window, e.g. 10px 50px or 50% 10%.

Click the Save link once you have finished editing your custom style coding area.

Based upon the above instructions, following is an example of code to be used if we wanted the background image to appear only once (i.e. no tiling), be positioned in the very center of the page and remain fixed:

body {
background-image: url('http://my-web-space.com/my-background-image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: auto;
}

Following is another example of code to have the background image tile horizontally across the very top of our page:

body {
background-image: url('http://my-web-space.com/my-background-image.png');
background-repeat: repeat-x;
background-position: center top;
background-attachment: scroll;
background-size: auto;
}

Following is another example of code to have the background image fill the entire page (note that we must set background-attachment to fixed in this case, as noted in the variable table above):

body {
background-image: url('http://my-web-space.com/my-background-image.png');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}

3. Content Area Background

The content area background colour, set by the Page Background colour group, will appear over the top of your background image. In some cases you may wish to remove this colour, so that your background image can be seen behind your entire page, including products and page content. In this case you can set the product area to be transparent.

Locate the Page Background colour group in your COLOUR CSS section, as detailed in the support article How do I edit my Big Cartel theme colours?, and set the colour to transparent. For example:

/* - - - - Page Background */
{% assign page_background = 'transparent' %}

Click the Save link at the top of the customisation area after you have finished editing your custom styles.