Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I add a background image to my Big Cartel theme?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Important Note

Some themes include a default background image (like the grid pattern on the Invisible Light theme). You must turn off any default background BEFORE applying the following instructions.

Default backgrounds are turned off via your theme’s primary custom options, refer How do I use the Custom Options for my Big Cartel theme?

1. Upload Background Image

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 web page?.

2. Add Background CSS Code

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?.

Enter your background CSS code into the custom style coding area in the following format:

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

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 and Z should be set as follows:

Variable Description Valid Values
W The complete public URL obtained in step 1 above. Example value:
http://aarfiefiles.com/aarfie.png
X Defines how your background image tiles. repeat
Tiles the image both horizontally and vertically.
repeat-x
Tiles the image in the horizontal direction only.
repeat-y
Tiles the image in the vertical direction only.
no-repeat
No tiling. The background image is displayed once only.
Y Defines the location of the background image, or the starting point for tiling if the image is repeated. A B
Where A is the horizontal alignment written as “left”, “center” or “right” and B is the vertical alignment written as “top”, “center” or “bottom”. For example, the value
center top
will be the best setting for most layouts1.
Z Defines whether the background image scrolls with the page or remains fixed. scroll
The background image scrolls with the page. This will be the desired setting in most cases.
fixed
The background remains fixed, despite page scrolling.

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 button 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://aarfiefiles.com/aarfie.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

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://aarfiefiles.com/aarfie.png');
background-repeat: repeat-x;
background-position: center top;
background-attachment: scroll;
}

3. Product Area Background

In some cases you may want your background image to only appear at the sides of your page and not behind your products. In this case you can set the product area to be a block colour over the top of your background image by styling the element that wraps your shop product area. With an Aarfie Big Cartel theme, this element is #wrap.

Navigate to your Big Cartel shop’s custom style coding area as with step 2 above, but this time scroll to the very top of the CSS and locate the code where the background-color is defined for the body element. This will be slightly different for each theme.

Body Background Color in Big Cartel

Locating the CSS code where the 'background-color' is defined for the 'body' element

Add the #wrap element to this style group by creating a new line after body and type #wrap, – note the trailing comma. Adding the #wrap element to this group allows you to control the colour from your Big Cartel admin Background colour picker controls.

Adding Wrap Element to CSS in Big Cartel

Adding the #wrap element to the body background colour style group

With the above changes, the #wrap element background colour will match the page background so if you have not yet applied your background image you will not see any change to your site. Changing the background colour with your basic colour picker controls will now change both your page and #wrap background colour simultaneously.

Using a Different Colour

To make the #wrap element background colour different to the page DO NOT add the #wrap element as described above. Instead, simply copy the following code:

/* @gui Content Wrap */
#wrap {
	background-color: #eeeeee;
	}

and paste it on a new line AFTER the body / background group:

Adding Wrap Element to CSS

Creating a new colour style group for the #wrap element

You will now see the new colour group “Content Wrap” in your basic colour picker controls that you can use to change the #wrap element background colour independent of the page background colour.

Padding

At this stage, you may find that the #wrap element is tight-fitting against your products. If this is the case, we recommend adding padding to the #wrap element to improve the appearance of your layout. This is achieved by adding the following code to your custom style coding area (i.e. the same area where you added your background image coding):

#wrap {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}

We recommend starting with 20px as the padding value, however you can adjust these values if you wish to increase or decrease the padding of the #wrap element.

4. Summary

Following is a screenshot of the custom style coding area after entering the example codes from the instructions above:

Adding a Background Image in Big Cartel

An example of the very top and very bottom of the Big Cartel shop CSS code after applying the instructions in this article

Last Modified: 21st July, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.