InMotion Hosting Support Center

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 osCommerceUse 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 osCommerceCrop 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:


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 osCommerceUpload your background.png background image to the images folder in your osCommerce installation directory.
  4. Edit StyleSheet osCommerceEdit the stylesheet.css file in your osCommerce root directory.
  5. Add the code to the css osCommerceNow 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 osCommerceNow visit your website and see the changes. You should see the site look like the image to the right.

Was this article helpful?
Continued Education in Course 201: Changing your osCommerce appearance
You are viewing Section 11: Changing the background image in osCommerce
Section 10: Changing the content background style in osCommerce
Section 12: Editing your header and footer in osCommerce Video

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!