Big Cartel Theme Support

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

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

Launch the Customize design area

Click the Customize design link in your Big Cartel admin area to launch your customisation tools. Should you ever experience any issues in this area, like a disconnect between viewing your shop normally compared to in the preview window, please refer to Troubleshooting the Big Cartel Customize design (preview) admin area.

Getting started with your new Aarcade theme at Aarcade

The controls available in the Customize panel of your Customize design area may vary slightly from that shown below, depending upon the base theme you chose before installing your Aarcade theme.

Upload a background image

Click the plus icon next to the Background image setting and select your background image from your files.

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

Click the Save link to apply your changes.

Removing a background image

To remove your header image, click the x icon next to the Header image setting.

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

Click the Save link to apply your changes.

Background styling

If you wish to change the repeat, position and other settings for your background image, use the tools provided at your Aarcade admin to set and update your theme style as detailed in How do I edit my theme's styles and options?

Get creative

You don’t have to use your background image on all pages. You can add styles in your custom style coding area — see Where do I add custom style code? — to get different results if needed.

For example, for the Tupelo - Black Haze preview, we use the method detailed in our support article Using the body tag to create page specific custom styles to force the background image to be displayed on the home page only.

/* Remove background image from all pages except home */
body:not(#home-page) {
	background-image: none;
}

For another example, the Invisible Light - Narvik preview applies the uploaded background image to the header area (instead of the whole page). This is achieved with the following custom style coding:

/* Use background image for header background */
body {
	background-image: none;
}
{% if background_image != blank %}
header.main-header {
	background-image: url("{{ background_image.url | constrain: '8000' }}");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
{% endif %}

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