Changing the background image in osCommerce

Default background osCommerce

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

    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

    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.
  2. Go to the File Manager. Select your osCommerce installation directory and click Go.
  3. Upload background image osCommerce

    Upload your background.png background image to the images folder in your osCommerce installation directory.

  4. Edit StyleSheet osCommerce

    Edit the stylesheet.css file in your osCommerce root directory.

  5. Add the code to the css osCommerce

    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

    Now visit your website and see the changes. You should see the site look like the image to the right.

Was this article helpful? Join the conversation!