Customizing your Big Cartel Background

There is a more recent post that you can read with updated instructions for Big Cartel background setup

There are several options if you are considering adding a background to your Big Cartel shop. Read on to find out the 3 ways I suggest for customizing  your big cartel background.

First things first though. If you want to use an image as a background you will need to host the file on your own server, amazon s3 or some other online server you can point a url at and get the image displayed.

A Solid Color Background

This is the simplest of choices. Using one of the default templates login and under design change the background color in the provided text box and update. If you need help choosing the color codes this site should help, http://html-color-codes.com/

A Repeating Background

In one of my popular posts about the initial features of css on Big Cartel I have an example of a repeating background image. For a repeating background image on Big Cartel you have a very simple css with your image. Make sure you image is saved for the web. This means make sure the file size is reasonably sized so it doesn’t slow down your page load.

body {background: url(http://yoursite/images/bg.gif)}

I told you that was an easy css addition to get the repeating image. There are variations you could try depending on the type of image or size (width and height). Your could consider the repeat-x or repeat-y options as well. Usually when working with a repeating background the size will vary from several pixels wide and tall to hundreds either way. It just depends on the repeating pattern you are trying to achieve. [Repeating background photoshop tutorial]

A Full Size Image Background

Now perhaps you have an amazing photo or illustration that you want to take the full screen. You might find yourself asking, Which size for Big Cartel Background? For starters the basic choice would be to make the image look good at 800×600 or 1024×768 since those are the 2 most popular resolutions right now, trending to the larger one. Create your image at the chosen size, consider making it a bit bigger so that is fills the entire viewable window. Again the css is simple here.

body {background: url(http://yoursite/images/bg.gif) no-repeat fixed;}

Now perhaps you want to consider if someone has a higher resolution. In this case consider using a fade out effect on your image towards the bottom, such as a fade to black or fade to the predominant color you would prefer your background to be. Then set the background color to match. So to set the background black where the background potentially doesn’t show because the resolution is to high the css would look like this:

body {background: #000000 url(http://yoursite/images/bg.gif) no-repeat fixed;}

Good luck with your site design modifications. I have a free big cartel css theme available for download that could help you get going or feel free to ask questions in the comments.

2 Responses to “Customizing your Big Cartel Background”

  1. Bryan Paulson

    I have a background image repeating on my bigcartel store. I have a problem in that there is a small thin outline around my image which also repeats. How do I get rid of this outline?

    • Matt

      The image your using for your background has a light gray border. That is what you are seeing as the outline. Edit the image to be solid to the edges of the image and the little box look will disappear.

      Thanks for reading the blog.