Guest Posted May 17, 2008 Posted May 17, 2008 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; }
Guest Posted May 17, 2008 Posted May 17, 2008 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
Guest Posted May 17, 2008 Posted May 17, 2008 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......
Guest Posted May 17, 2008 Posted May 17, 2008 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
Guest Posted May 17, 2008 Posted May 17, 2008 my website is http://www.naturalherbs4naturalliving.com.....im sorry if i seem like a total idiot in this..but can you show me in my code what to input..I uploaded my image for the background using my ftp program....I put it in public_html/images folder.....
Guest Posted May 17, 2008 Posted May 17, 2008 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
Guest Posted May 17, 2008 Posted May 17, 2008 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
Guest Posted May 17, 2008 Posted May 17, 2008 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
germ Posted May 17, 2008 Posted May 17, 2008 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 >
Guest Posted May 17, 2008 Posted May 17, 2008 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
germ Posted May 17, 2008 Posted May 17, 2008 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 >
Guest Posted May 17, 2008 Posted May 17, 2008 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....
Guest Posted May 17, 2008 Posted May 17, 2008 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
Guest Posted May 17, 2008 Posted May 17, 2008 :( no it just made the background white instead of black now......
germ Posted May 17, 2008 Posted May 17, 2008 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 >
Guest Posted May 17, 2008 Posted May 17, 2008 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
germ Posted May 17, 2008 Posted May 17, 2008 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 >
Recommended Posts
Archived
This topic is now archived and is closed to further replies.