How to Change Background Colour to Background image

[ittybittykitty]

I feel real stupid for asking this question, because I know it's probably something simple, but I've googled my question a million times with no straight answer, and have been searching the forums for hours.

I just want to change the white back ground on my site (on the left and right outer sides) to a background image.

http://weddingprintdesign.com/

Ideally I would like it to look like the image below. So I need to know how to put it in and how to center it so the design stays on the outsides of the main page. (does that make sense?)

Hopefully I'm not way out in left field.

This is what I tried doing:

I went into the Stylesheet.css and typed

body {


margin: 0;


font-family: verdana, arial, helvetica, sans-serif;


font-size: 62.5%;


color: #3B3B39;


background-image: url("...image/back.jpg");


background-repeat: no-repeat;


background-position: left top;


}

[kobra]

Watch your spelling and syntax

Yours:Emphasis mine

background-image: url("...image/back.jpg");

image should be images - no quotes - no three dots - missing slash
Change to:

background-image: url(../images/back.jpg);

[ittybittykitty]

wow! Now I really feel stupid! lol, Thanks for replying to me! you must have been shaking your head!

I did change it and it still not working though... I don't get it. I saved the back.jpg image under /weddingprintdesign/includes/templates/red_passion/images

Is that were it's supposed to be?

and this is what I have now...

body {


margin: 0;


font-family: verdana, arial, helvetica, sans-serif;


font-size: 62.5%;


color: #3B3B39;


background-image: url(../images/back.jpg);


background-repeat: no-repeat;


background-position: center top;


}

[ittybittykitty]

/**


 * Main CSS Stylesheet


 *


 * @package templateSystem


 * @copyright Copyright 2003-2005 Zen Cart Development Team


 * @copyright Portions Copyright 2003 osCommerce


 * @license [url]http://www.zen-cart.com/license/2_0.txt[/url] GNU Public License V2.0


 * @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $


 */





/* Clean Business theme by Dieter Schneider for [url]www.csstemplateheaven.com[/url] 2007*/




body {


	margin: 0;


	font-family: verdana, arial, helvetica, sans-serif;


	font-size: 62.5%;


	color: #3B3B39;


	background-image: url(../images/back.jpg);
	

	background-repeat: no-repeat;


	background-position: center top;


	}





a img {border: none; }





a:link, #navEZPagesTOC ul li a {


	color: #3B3B39;


	text-decoration: none;


	}


 


a:visited {


	color: #3B3B39;


	text-decoration: none;


	}





a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {


	color: #666666;


	}





a:active {


	color: #000000;


	}





h1 {


	font-size: 1.5em;


	}





h2 {


	font-size: 1.4em;


	}





h3 {


	font-size: 1.3em;


	}





h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{


	font-size: 1.1em;


	}





.biggerText {


	font-size: 1.2em;


	}





h1, h2, h3, h4, h5, h6 {


	margin: 0.3em 3px;


	}





CODE {


	font-family: arial, verdana, helvetica, sans-serif;


	font-size: 1em;


	}





FORM, SELECT, INPUT {


	display: inline;


	font-size: 1em;


	margin: 0.1em;


	}





TEXTAREA {


	float: left;


	margin: auto;


	display: block;


	width: 95%;


	}





input:focus, select:focus, textarea:focus {


	background: #F0F8FF;





	}





FIELDSET {


	padding: 0.5em;


	margin: 0.5em 0em;


	border: 1px solid #7e0202;


	background-color: #fbf6d5


	}





LEGEND {


	font-weight: bold;


	padding: 0.3em;


	background-color: #7e0202;


	color: #FFFFFF;


	}





LABEL, h4.optionName {


	line-height: 1.5em;


	padding: 0.2em;


	}





LABEL.checkboxLabel, LABEL.radioButtonLabel {


	margin: 0.5em 0.3em;


	}





#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {


	float: left;


	}





LABEL.inputLabel {


	width: 11em;


	float: left;


	}





LABEL.inputLabelPayment {


	width: 15em;


	float: left;


	}





LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {


	width: 12em;


	float: left;


	}





P, ADDRESS {


	padding: 0.5em;


	}





ADDRESS {


	font-style: normal;


	}





.clearBoth {


	clear: both;


	}





HR {


	height: 1px;


	margin-top: 0.5em;


	border: none;


	border-bottom: 1px solid #9A9C86;


	}





/*warnings, errors, messages*/


.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {


	line-height: 1.8em;


	padding: 0.2em;


	border: 1px solid #000000;


	}





.messageStackWarning, .messageStackError {


	background-color: #ff0000;


	color: #ffffff;


	}





.messageStackSuccess {


	background-color: #99FF99;


	color: #000000;


	}





.messageStackCaution {


	background-color: #FFFF66;


	color: #000000;


	}





/*wrappers - page or section containers*/


#mainWrapper {





	text-align: left;


	width: 842px;


	vertical-align: top;


	background-image: url(../images/mainwrapper_tile.jpg);


	background-repeat: repeat-y;


	background-position: center;


	}





#logoWrapper {


    background-color: transparent;


    height:282px;


	}


	


#headerWrapper {


	background-image: url(../images/header_bg.jpg);


    background-repeat: no-repeat;


}





#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {


	margin: 0em;


	margin-top: 15px;


	}


	





#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {


	margin: auto;


	} 





#tagline {


	color:#ffffff;


	font-size: 1.4em;


	font-weight: bold;


	text-align : right;


	vertical-align: middle;


	padding-right: 30px;


	padding-top: 60px;


	}





#sendSpendWrapper {


	border: 1px solid #cacaca;


	float: right;


	margin: 0em 0em 1em 1em;


	}





.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {


	margin: 0;


	width: 47%;


	}





.wrapperAttribsOptions {


	margin: 0.3em 0em;


	}





/*navigation*/





.navSplitPagesResult {}


.navSplitPagesLinks {}


.navNextPrevCounter {


	margin: 0em;


	font-size: 0.9em;


	}


.navNextPrevList {


	display: inline;


	white-space: nowrap;


	margin: 0;


	padding:  0.5em 0em;


	list-style-type: none;


	}





#navMainWrapper {


	margin: 0em;


	margin-bottom: 0px;


	height: 26px;


	background-color: #989da3;


	font-weight: bold;


	color: #ffffff;


	padding: 15px;


	background-image: url(../images/nav_cat_bg.jpg);


	background-repeat: no-repeat;


	}


	


#navSuppWrapper {	


    margin: 0em;


	margin-bottom: 0px;


	height: 26px;


	background-color: #989da3;


	font-weight: bold;


	color: #ffffff;


	padding: 15px;


	background-image: url(../images/footer.jpg);


	background-repeat: repeat-y;


	}


	


#navCatTabsWrapper {


    margin-left: 20px;


	margin-right: 20px;


	width: 802px;


	background-image: none;


	height: 20px;


	position: absolute;


	top: 12px;


}





#navMain ul, #navSupp ul, #navCatTabs ul  {


	margin: 0;


	padding:  0.5em 0em;


	list-style-type: none;


	text-align: center;


	line-height: 1.5em;


	}





#navMain ul li, #navSupp ul li, #navCatTabs ul li {


	display: inline;


	white-space: nowrap;


	}





#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {


	text-decoration: none;


	padding: 0em 0.5em;


	margin: 0;


	color: #666666;


	}





#navEZPagesTOCWrapper {


	font-weight: bold;


	float: right;


	height: 1%;


	border: 1px solid #000000;


	}





#navEZPagesTOC ul {


	margin: 0;


	padding:  0.5em 0em;


	list-style-type: none;


	line-height: 1.5em;


	}





#navEZPagesTOC ul li {


	white-space: nowrap;


	}





#navEZPagesTOC ul li a {


	padding: 0em 0.5em;


	margin: 0;


	}





#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {


	margin: 0.5em;


	}





#navBreadCrumb {


	background-color: transparent;


	}





#navEZPagesTop {


	background-color: #FFFFFF;


	}





#navBreadCrumb, #navEZPagesTop {


	font-size: 0.95em;


	font-weight: bold;


	margin: 0em;


	padding: 0.5em 0.5em 0.5em 1.5em;


	}





#navColumnOne {


	background-color: transparent;


    }





#navColumnTwo {


	background-color: transparent;	


	}





/*The main content classes*/


#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {


	vertical-align: top;


	}


	


table {padding-left: 8px;


       padding-right: 8px;


	   }





/*.content,*/ #productDescription, .shippingEstimatorWrapper {


	/*font-size: 1.2em;*/


	padding: 0.5em;


	}





.alert {


	color: #FF0000;


	margin-left: 0.5em;


	}


.advisory {}


.important {


	font-weight: bold;


	}


.notice {}


.rating{}


.gvBal {


	float: right;


	}


.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {


	padding: 20px;


	}





.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {


	font-size: 0.9em;


	}





/*Shopping Cart Display*/


#cartAdd {


	float: right;


	text-align: center;


	margin: 1em;


	border: 1px solid #000000;


	padding: 1em;


	}








.tableHeading TH {


	border-bottom: 1px solid #cccccc;


	}





.tableHeading, #cartSubTotal {


	background-color: #e9e9e9;


	 }





#cartSubTotal {


	border-top: 1px solid #cccccc;


	font-weight: bold;


	text-align: right;


	line-height: 2.2em;


	padding-right: 2.5em;


	}





.tableRow, .tableHeading, #cartSubTotal {


	height: 2.2em;


	}





.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {


	padding: 0.5em 0em;


	}





.cartUnitDisplay, .cartTotalDisplay {


	text-align: right;


	padding-right: 0.2em;


	}





#scUpdateQuantity {


	width: 2em;


	}





.cartQuantity {


	width: 4.7em;


	}





.cartNewItem {


	color: #33CC33;


	position: relative;  /*do not remove-fixes stupid IEbug*/


	}





.cartOldItem {


	color: #606000;


	position: relative;   /*do not remove-fixes stupid IEbug*/


	}





.cartBoxTotal {


	text-align: right;


	font-weight: bold;


	}





.cartRemoveItemDisplay {


	width: 3.5em;


	}





#cartAttribsList {


	margin-left: 1em;


	}





#mediaManager {


	width: 50%; 


	margin: 0.2em;


	padding: 0.5em;


	}


.normalprice, .productSpecialPriceSale {


	text-decoration: line-through;


	}





.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {


	color: #ff0000;


	}





#cartBoxListWrapper ul, #ezPageBoxList ul {


	list-style-type: none;


	}





#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {


	margin: 0;


	padding: 0.2em 0em;


	} 





.totalBox {


	width: 5.5em;


	text-align: right;


	padding: 0.2em;


	}





.lineTitle, .amount {


	text-align: right;


	padding: 0.2em;


	}





.amount {


	width: 5.5em;


	}





/*Image Display*/


#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {


	margin: 0em 1em 1em 0em ;


	}





.categoryIcon {}


#cartImage {


	margin: 0.5em 1em;


	}





/*Attributes*/


.attribImg {


	width: 20%;


	margin: 0.3em 0em;


}





.attributesComments {}





/*list box contents*/


.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {


	margin: 1em 0em;


	}





/*sideboxes*/


.columnLeft {}





h3.leftBoxHeading, h3.leftBoxHeading a {


	font-size: 1em;


	height: 22px;


	color: #FFFFFF;


	}





.leftBoxHeading, .centerBoxHeading {


	margin: 0em;


	background-color: transparent;


	padding: 0.5em 0.2em;


	}


	


.leftBoxHeading {


	margin: 0em;


	background-color: transparent;


	padding: 5px 0px;


	background-image: url(../images/menu_bg.gif);


	background-repeat: no-repeat;


	}





.leftBoxContainer {


     border: none;


	}





.sideBoxContent {


	background-color: transparent;


	padding: 0.4em;


	}





h3.rightBoxHeading, h3.rightBoxHeading a {


	font-size: 1em;


	height: 22px;


	color: #FFFFFF;


	}





.rightBoxHeading {


	margin: 0em;


	background-color: transparent;


		padding: 5px 0px;


	background-image: url(../images/menu_right_bg.gif);


	background-repeat: no-repeat;


	}


	


.rightBoxContainer {


	border: none;


	}








h3.leftBoxHeading a:hover {


	color: #FFFF33;


	text-decoration: none;


	}





h3.rightBoxHeading a:hover {


	color: #606000;


	text-decoration: none;


	}





.rightBoxContent {


	background-color: #000000;


	margin-bottom: 1em;


	}





.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {


	text-align: center;


	}





#siteinfoIP, #siteinfoLegal {


	background-color: #FFFFFF;


	}





#bestsellers .wrapper {


	margin: 0em 0em 0em 1.5em;


	}





#bestsellers ol {


	padding: 0;


	margin-left: 1.1em;


	}





#bestsellers li {


	padding: 0;


	margin: 0.3em 0em 0.3em 0em;


	}





#bannerboxHeading {


	background-color: transparent;


}





#upProductsHeading {


	text-align: left;


	}





#upDateHeading {


	text-align: right;


	}





/*misc*/


.back {


	float: left;


	}





.forward {


	float: right;


	}


	


.hiddenField {


	display: none;


	}





.visibleField {


	display: inline;


	}	





.bold {


	font-weight: bold;


	}





.rowOdd {


	background-color: #E8E8E8;


	height: 1.5em;


	vertical-align: top;


	}





.rowEven {


	background-color: #F0F0F0;


	height: 1.5em;


	vertical-align: top;


	}


	


.productListing-odd {background-color: #FFFFFF;


                      }


					  


.productListing-even {background-color: #e5e5e5;


                      }


					  


.listingProductImage {padding: 4px;}





CAPTION {


	/*display: none;*/


	}





#myAccountGen li, #myAccountNotify li {


	margin: 0;


	} 





.accountTotalDisplay, .accountTaxDisplay {


	width: 20%;


	text-align: right;


	/*vertical-align: top*/


	}





.accountQuantityDisplay {


	width: 10%;


	vertical-align: top


	}





TR.tableHeading {


	background-color: #cacaca;


	height: 2em;


	}





#siteMapList {


	width: 90%;


	float: right;


	}





.ratingRow {


	margin: 1em 0em 1.5em 0em;


	}





LABEL#textAreaReviews {


	font-weight: normal;


	margin: 1em 0em;


	}





#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {


	background-color: #ffffff;


	}

[stevesh]

If the back3.jpg is what you're looking to do, this would work, too.


http://www.zen-cart.com/forum/showth...borders&page=3

[ittybittykitty]

thanks so much for the help! I'm going to check out that link. I got it working for now. I changed the image to a gif and it worked for some reason.