Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Background image help


Guest

Recommended Posts

Hi, can someone please walk me through setting a background image to my store...this is the code below it is a contribution that centered my store....how do I add a background...Help Please...

 

 

/*

 

$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 

 

 

osCommerce, Open Source E-Commerce Solutions

 

http://www.oscommerce.com

 

 

 

Copyright © 2003 osCommerce

 

 

 

Released under the GNU General Public License

 

*/

 

 

 

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

 

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

 

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

 

.productsNotifications { background: #f2fff7; }

 

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

 

 

 

BODY {

 

text-align: center;

 

background: #ffffff;

 

color: #000000;

 

margin: 0px;

 

}

 

 

 

.fixcenter {

 

width: 778px;

 

border: solid; border-width: 1px;

 

background: #ffffff;

 

color: #000000;

 

margin: auto;

 

margin-top: 20px;

 

text-align: left;

 

}

 

 

 

A {

 

color: #000000;

 

text-decoration: none;

 

}

 

 

 

A:hover {

 

color: #AABBDD;

 

text-decoration: underline;

 

}

 

 

 

FORM {

 

display: inline;

 

}

 

 

 

TR.header {

 

background: #ffffff;

 

}

 

 

 

TR.headerNavigation {

 

background: #bbc3d3;

 

}

 

 

 

TD.headerNavigation {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

background: #bbc3d3;

 

color: #ffffff;

 

font-weight : bold;

 

}

 

 

 

A.headerNavigation {

 

color: #FFFFFF;

 

}

 

 

 

A.headerNavigation:hover {

 

color: #ffffff;

 

}

 

 

 

TR.headerError {

 

background: #ff0000;

 

}

 

 

 

TD.headerError {

 

font-family: Tahoma, Verdana, Arial, sans-serif;

 

font-size: 12px;

 

background: #ff0000;

 

color: #ffffff;

 

font-weight : bold;

 

text-align : center;

 

}

 

 

 

TR.headerInfo {

 

background: #00ff00;

 

}

 

 

 

TD.headerInfo {

 

font-family: Tahoma, Verdana, Arial, sans-serif;

 

font-size: 12px;

 

background: #00ff00;

 

color: #ffffff;

 

font-weight: bold;

 

text-align: center;

 

}

 

 

 

TR.footer {

 

background: #bbc3d3;

 

}

 

 

 

TD.footer {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

background: #bbc3d3;

 

color: #ffffff;

 

font-weight: bold;

 

}

 

 

 

.infoBox {

 

background: #b6b7cb;

 

}

 

 

 

.infoBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

.infoBoxNotice {

 

background: #FF8E90;

 

}

 

 

 

.infoBoxNoticeContents {

 

background: #FFE6E6;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

TD.infoBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #bbc3d3;

 

color: #ffffff;

 

}

 

 

 

TD.infoBox, SPAN.infoBox {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

.contentBox {

 

background: #b6b7cb;

 

}

 

 

 

TD.contentBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

 

 

.contentBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.BestSellersBox {

 

background: #b6b7cb;

 

}

 

TD.BestSellersBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.BestSellersBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.CategoriesBox {

 

background: #b6b7cb;

 

}

 

TD.CategoriesBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.CategoriesBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.CurrenciesBox {

 

background: #b6b7cb;

 

}

 

TD.CurrenciesBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.CurrenciesBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.InformationBox {

 

background: #b6b7cb;

 

}

 

TD.InformationBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.InformationBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.LanguagesBox {

 

background: #b6b7cb;

 

}

 

TD.LanguagesBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.LanguagesBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.ManufacturerInfoBox {

 

background: #b6b7cb;

 

}

 

TD.ManufacturerInfoBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.ManufacturerInfoBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.ManufacturersBox {

 

background: #b6b7cb;

 

}

 

TD.ManufacturersBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.ManufacturersBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.OrderHistoryBox {

 

background: #b6b7cb;

 

}

 

TD.OrderHistoryBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.OrderHistoryBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.ProductNotificationsBox {

 

background: #b6b7cb;

 

}

 

TD.ProductNotificationsBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.ProductNotificationsBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.ReviewsBox {

 

background: #b6b7cb;

 

}

 

TD.ReviewsBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.ReviewsBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.SearchBox {

 

background: #b6b7cb;

 

}

 

TD.SearchBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.SearchBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.ShoppingCartBox {

 

background: #b6b7cb;

 

}

 

TD.ShoppingCartBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.ShoppingCartBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.SpecialsBox {

 

background: #b6b7cb;

 

}

 

TD.SpecialsBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.SpecialsBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.TellaFriendBox {

 

background: #b6b7cb;

 

}

 

TD.TellaFriendBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.TellaFriendBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

 

 

.WhatsNewBox {

 

background: #b6b7cb;

 

}

 

TD.WhatsNewBoxHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

font-weight: bold;

 

background: #b6b7cb;

 

color: #ffffff;

 

}

 

.WhatsNewBoxContents {

 

background: #f8f8f9;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

 

background: #f8f8f9;

 

}

 

 

 

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

 

background: #f8f8f9;

 

}

 

 

 

TABLE.productListing {

 

border: 1px;

 

border-style: solid;

 

border-color: #b6b7cb;

 

border-spacing: 1px;

 

}

 

 

 

.productListing-heading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

background: #b6b7cb;

 

color: #FFFFFF;

 

font-weight: bold;

 

}

 

 

 

TD.productListing-data {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

A.pageResults {

 

color: #0000FF;

 

}

 

 

 

A.pageResults:hover {

 

color: #0000FF;

 

background: #FFFF33;

 

}

 

 

 

TD.pageHeading, DIV.pageHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 20px;

 

font-weight: bold;

 

color: #9a9a9a;

 

}

 

 

 

TR.subBar {

 

background: #f4f7fd;

 

}

 

 

 

TD.subBar {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

color: #000000;

 

}

 

 

 

TD.main, P.main {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 11px;

 

line-height: 1.5;

 

}

 

 

 

TD.smallText, SPAN.smallText, P.smallText {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

}

 

 

 

TD.accountCategory {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 13px;

 

color: #aabbdd;

 

}

 

 

 

TD.fieldKey {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 12px;

 

font-weight: bold;

 

}

 

 

 

TD.fieldValue {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 12px;

 

}

 

 

 

TD.tableHeading {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 12px;

 

font-weight: bold;

 

}

 

 

 

SPAN.newItemInCart {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 10px;

 

color: #ff0000;

 

}

 

 

 

CHECKBOX, INPUT, RADIO, SELECT {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 11px;

 

}

 

 

 

TEXTAREA {

 

width: 100%;

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 11px;

 

}

 

 

 

SPAN.greetUser {

 

font-family: Verdana, Arial, sans-serif;

 

font-size: 12px;

 

color: #f0a480;

 

font-weight: bold;

 

}

 

 

 

TABLE.formArea {

 

background: #f1f9fe;

 

border-color: #7b9ebd;

 

border-style: solid;

 

border-width: 1px;

 

}

 

 

 

TD.formAreaTitle {

 

font-family: Tahoma, Verdana, Arial, sans-serif;

 

font-size: 12px;

 

font-weight: bold;

 

}

 

 

 

SPAN.markProductOutOfStock {

 

font-family: Tahoma, Verdana, Arial, sans-serif;

 

font-size: 12px;

 

color: #c76170;

 

font-weight: bold;

 

}

 

 

 

SPAN.productSpecialPrice {

 

font-family: Verdana, Arial, sans-serif;

 

color: #ff0000;

 

}

 

 

 

SPAN.errorText {

 

font-family: Verdana, Arial, sans-serif;

 

color: #ff0000;

 

}

 

 

 

.moduleRow { }

 

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

 

.moduleRowSelected { background-color: #E9F4FC; }

 

 

 

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

 

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

 

 

 

/* message box */

 

 

 

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

 

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

 

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

 

 

 

/* input requirement */

 

 

 

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

 

 

 

.cssButton {

 

background: #f0f0ff;

 

color: #000080;

 

height: 20px;

 

vertical-align: top;

 

font-weight: normal;

 

font-family: Tahoma, Verdana, Arial, sans-serif;

 

font-size: 12px;

 

cursor: pointer;

 

text-align: center;

 

text-decoration: none;

 

border: 1px;

 

border-style: solid;

 

border-color: #000080;

 

border-spacing: 1px;

 

line-height: 22px;

 

}

 

 

 

#thecategories a:hover {

 

background-color: #eeeeee;

 

color: #000000;

 

}

 

 

 

.catwithsubs, .catwithnosubs {

 

padding-right: 5px;

 

}

 

 

 

#thecategories {

 

position: relative;

 

top: -9px;

 

margin-bottom: -16px;

 

width: 140px;

 

}

 

 

 

.activelink {

 

display: block;

 

font-weight: bold;

 

}

 

 

 

#thecategories a {

 

display: block;

 

padding-bottom: 7px;

 

padding-top: 3px;

 

width: 100%;

 

}

 

 

 

/*mozilla fix*/

 

html>body #thecategories a {

 

width: auto;

 

}

 

/*end of mozilla fix*/

 

 

 

#topcat a {

 

padding-left: 5px;

 

}

 

 

 

#secondcat a {

 

padding-left: 20px;

 

}

 

 

 

#thirdcat a {

 

padding-left: 35px;

 

}

 

 

 

#fourthcat a {

 

padding-left: 50px;

 

}

 

 

 

#fifthcat a {

 

padding-left: 65px;

 

}

Link to comment
Share on other sites

The code for the background image is

 

  
 background-image: url(http://www.yoursite.com/path/to/images/imagename.jpg);
 height: 81px;
 width: 250px;

 

You will want to put a table around the whole site in index.php. Find the first table tag and add one above it (dont forget to put your closing tag at the bottom). set the width to a fixed pixel

 

<table cellpadding="0" cellspacing="0" border="0" width="766">
<tr class="background">
<td class="background" align="left" valign="top">

 

create a new section in your style sheet for this named background

 

TR.background {
 background: #bbc3d3;
}

TD.background {
 background: #bbc3d3;
 background-image: url(http://www.yoursite.com/path/to/images/imagename.jpg);
 width: 766px;
}

 

this will set the backgound for the main body

 

*************************NOTE**************************

Do not set a height for the body background image or it will not repeat correctly

*******************************************************

 

not just do the same for your header, footer and navbar if you create your own.

 

see https://www.botanicalgardenproducts.com/sho.../stylesheet.css for more info.

 

Clint

Link to comment
Share on other sites

Can some one please walk me through doing this I tried what you told me but it just messed up my whole store im not sure I did this right......

Link to comment
Share on other sites

Can some one please walk me through doing this I tried what you told me but it just messed up my whole store im not sure I did this right......

 

 

What is your website?

 

Paste the index.php inside a "insert CODEBOX" from the left.

 

Clint

Link to comment
Share on other sites

first, you want to upload them into catalog/images/ folder.

 

also go into catalog/index.php and copy the text in a codebox to the left so I can see what you have. I will make bold my additions so you can see what I am doing.

 

also, describe your background image to me. Is it a customer made image or just a single image that you want to repeat all throughout the page?

 

Clint

Link to comment
Share on other sites

Ok I have the image in the catalog/image folder....and I put the code in the index.php folder and it aligned my store to the left..........my image is just of some herbs it is a single picture but it's of herbs so the image is identical...I want it to spread throughout the background

Link to comment
Share on other sites

Inside the table tag, add align="center"

 

as for the image, it needs to go in the body tag if you want it to span the whole site.

 

add this to the stylesheet

 

BODY {
 background: #000000;
 color: #000000;
 background-image: url(http://www.naturalherbs4naturalliving.com/catalog/images/image file goes here);
 margin: 0px;
}

 

also, change the code that I gave you earlier to this

 

TR.background {
background: #000000;
}

TD.background {
background: #000000;
width: 766px;
}

 

change the width to how ever wide you want it to be.

 

See if that gets you what you are looking for.

 

Let me know.

 

Clint

Link to comment
Share on other sites

This may help:

 

CSS background-repeat Property

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Ok, the store re-aligned to the center...but the image didnt show its all black on the sides and there is a pink strip on the top and bottom of the store....if you go to my site you will see it....http://www.naturalherbs4naturalliving.com

Link to comment
Share on other sites

BODY {
background: #000000;
color: #000000;
background-image: url(/images/Natural%20Herbs.gif);
margin: 0px;
}

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Ok the last addition you to me to replace got rid of the pink lines on the top and bottom but the image is still not showing....

Link to comment
Share on other sites

replace the following:

 

TR.background {
background: #000000;
}

TD.background {
background: #000000;
width: 766px;
}

 

with

 

TD.background {
width: 766px;
}

 

 

also replace

 

BODY {
background: #000000;
color: #000000;
background-image: url(http://www.naturalherbs4naturalliving.com/catalog/images/image file goes here);
margin: 0px;
}

 

with

 

BODY {
background: #ffffff;
background-image: url(http://www.naturalherbs4naturalliving.com/images/Natural Herbs.gif);
margin: 0px;
}

 

 

that should fix everything

 

Clint

Link to comment
Share on other sites

background-image: url(/images/Natural%20Herbs.gif);

Try that for your background-image definition if the other doesn't work.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Y :) Thanks that %20 worked it shows now....what does the %20 do??.......thank you very much Clint and Jim for your help and support I really appreciate it....you guys just dont know how much.... :D

Link to comment
Share on other sites

The %20 is "code" for the space you have in the filename.

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...