How do I change the background of my store?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: We have archived this topic as it has either reached a resolution or has become inactive.  If you believe this topic should not have been archived, please let us know, and we would be happy to review it.  You may continue to access this topic as needed fo

With BigCommerce, it is easy to customize your store, including the background. You can either have a color or image as the background to your store, and it is easy to find where to customize this. Please note that you will need to have some CSS knowledge to complete this, especially if you want to use an image. Please visit this page if you would like to learn about changing a background with CSS.

1.) Login to your store's control panel.
2.) Click on Design.

designlinky.png

3.) Click on the Template Files tab.

templatetab.png

4.) Scroll down to the Styles folder and click the plus sign next to it.

stylesplus.png

5.) Find the css file that is for the color of your template. In this example, mine is the gray.css. This will change depending on the template you have chosen.

6.) Click Edit for that css file.

2012-01-18_1607.png

7.) Find the background line. There are two different parts of the tag: a color and an image.

Background color:

2012-01-18_1607_001.png

Background image:

2012-01-18_1608.png

8a.) If you wish to change the background color, simply change the hex code for the color.

2012-01-18_1615.png

8b.) If you wish to change the background image, simply change the URL (and it's repeat status) to the URL for the image you wish to use. (In this case, I used the same image filename, but just changed it in Photoshop, and then uploaded it to my FTP drive.)

2012-01-18_1619.png

9.) When you are done making changes, click the Save button.

2012-01-17_1649_001.png

Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb

Posted 6 years ago

  • 0
  • 1
Photo of Michelle7845

Michelle7845

  • 770 Points 500 badge 2x thumb
I am trying to change the background color to black and when I go into the white.css option and change the hex code to#000000 and click save and refresh nothing happens.  Do I need to change something else here?  This is what the css looks like when I change it

body {
    background:  url(%%GLOBAL_TPL_PATH%%/images/bedazzled/bg_pattern.png)repeat;
    color: #000000;
}
a{
    color: #009e8e;
    text-decoration: none;
    font-weight: inherit;
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You have a URL for an image that overrides the color. You would need to remove the image and only specify a color
Photo of Michelle7845

Michelle7845

  • 770 Points 500 badge 2x thumb
Thank you for your help.  That worked. :-)
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Great

This conversation is no longer open for comments or replies.