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:

    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 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.

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

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

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

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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?

Search

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: support@InMotionHosting.com
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!