1 Attachment(s)
How to Change Background Colour to Background image
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;
}
Re: How to Change Background Colour to Background image
Watch your spelling and syntax
Yours:Emphasis mine
Code:
background-image: url("...image/back.jpg");
image should be images - no quotes - no three dots - missing slash
Change to:
Code:
background-image: url(../images/back.jpg);
Re: How to Change Background Colour to Background image
wow! Now I really feel stupid! :blink: 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;
}
Re: How to Change Background Colour to Background image
HTML Code:
/**
* 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;
}
Re: How to Change Background Colour to Background image
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
Re: How to Change Background Colour to Background image
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.
:D
