Changing the background image in osCommerce
Create a background image
- Take a snapshot of your osCommerce site and open it with a Photo editor. In this tutorial we are using PhotoShop.
- 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).
- 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:
Steps to Change your osCommerce background
- Login into your cPanel.
- Go to the File Manager. Select your osCommerce installation directory and click Go.
- Upload your background.png background image to the images folder in your osCommerce installation directory.
- Edit the stylesheet.css file in your osCommerce root directory.
- 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:
To the following code:
background: repeat-x top url('images/background.png') #fff8e5;
Save the file.
‹Section 10: Changing the content background style in osCommerce
›Section 12: Editing your header and footer in osCommerce Video
You are NOT logged in. You can still browse our Support Center.
To participate within our Community Support Forum:
Changing your osCommerce appearance
Changing the osCommerce theme
|1.||Installing the osCommerce Theme Switcher|
|2.||Fixing the jQuery version in osCommerce|
|3.||Changing the theme in osCommerce|
Changing the Banner and Logo in osCommerce
|4.||Changing the osCommerce logo|
|5.||How to change the banner in osCommerce|
|6.||Deleting or Disabling a Banner in osCommerce|
|7.||Managing Banners in osCommerce|
|8.||Managing your banners in osCommerce Video|
Editing the osCommerce footer, header and background
|9.||Removing the branding from the osCommerce footer|
|10.||Changing the content background style in osCommerce|
|11.||Changing the background image in osCommerce|
|12.||Editing your header and footer in osCommerce Video|
|13.||Editing your left and right columns in osCommerce Video|