---
title: "Changing the background image in osCommerce"
description: "Once you have the theme changed to your satisfaction, you can add a background image, footer image, and more. In this article, we will learn how to change the background in your osCommerce website...."
url: https://www.inmotionhosting.com/support/edu/oscommerce/change-background-image-os/
date: 2013-04-22
modified: 2021-08-16
author: "InMotion Hosting Contributor"
categories: ["OsCommerce"]
type: post
lang: en
---

# Changing the background image in osCommerce

[![Default background osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-1-default.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-1-default.png)

Once you have the theme changed to your satisfaction, you can add a background image, footer image, and more. In this article, we will learn how to change the background in your osCommerce website.

## Create a background image

1. **Take a snapshot** of your osCommerce site and **open it with a Photo editor**. In this tutorial we are using *PhotoShop*.
2. [![Make background osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-2-make-background.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-2-make-background.png) Use the tools in your Photo Editor to **create** a background image. The background we will make will be a very narrow image that will duplicate across the screen. 1: **Create** the background image 2: Use the **Eye Dropper** to get the Color for the background 3: **Copy the color code** for the background (In this case the code is *fff8e0*).
3. [![Sample background osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_background.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_background.png) **Crop** your Background image so it looks like the image to the right. (You will need to click the image to see the full size) **Save** the image as: background.png

## Steps to Change your osCommerce background

1. [Login into your cPanel](/support/edu/cpanel/how-to-log-into-cpanel/).
2. [Go to the File Manager](/support/edu/cpanel/using-file-manager-in-cpanel/). **Select** your osCommerce installation directory and click **Go**.
3. [![Upload background image osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_click-upload.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_click-upload.png) [Upload](/support/website/how-to-edit-a-file/) your *background.png* background image to the images folder in your osCommerce installation directory.
4. [![Edit StyleSheet osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_click-code-editor.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_click-code-editor.png) **[Edit](/support/edu/cpanel/file-manager-code-editor/)** the *stylesheet.css* file in your osCommerce root directory.
5. [![Add the code to the css osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-5-add-code.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-5-add-code.png) Now we will **add the code** to the CSS that will display the background image and change the background color to #fff8e5. The “**body**” CSS code is what will be edited. (See image to the right) **Change** the following code: background: #fff; **To** the following code: background: repeat-x top url('images/background.png') #fff8e5; **Save** the file. [![Final look with background osCommerce](https://www.inmotionhosting.com/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-6-final.png)](/support/wp-content/uploads/2013/04/edu_oscommerce_201_change-background_change-background-6-final.png) Now visit your website and see the changes. You should see the site look like the image to the right.