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
Support Center LoginOur Login page has moved, Click the button below to be taken to the login page.
Social Media Login
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|