White Background In Content Area, Red Background Or Image

[gmarankie]

Hello, This seems really basic, however, I cannot seem to get it to work properly. I am working on site which is template based from an e-commerce provider "SunShop". I simply would like to add a background image or just a red background, but certainly have the content area to remain white. If I add a BG color currently, it turns the whole content area red as well. All of the template pages throughout the site are generated from the one css file so I cannot do the content area/background in html.http://www.rocketfizz.com/Any help would be really appreciated.Thank you,Gregcss..........div, img, form, fieldset, #footer ul, #footer li, #header ul, #header li, .column ul, .column li, h1, h2, h3, h4 { padding: 0; margin: 0; border: 0; } .clear { clear: both; }.right { float: right; }.left { float: left; } .tc { text-align: center; padding-top: 10px; padding-bottom: 10px; }.tr { text-align: right; }input, select, textarea { /* Input And Select Font */ font: normal 11px/150% "Arial", "Helvetica", sans-serif; color: #242424;}body { /* Main Font Sizes */ font: normal 11px/150% "Arial", "Helvetica", sans-serif; color: #242424; /* Main Background Color */ background-color: #ffffff; background-image: url("images/bg.jpg"); margin:0; padding: 0;}a { color: #000000;} a:hover { text-decoration: underline; } h1 { /* Logo Positioning */ position: absolute; top: 10px; left: 10px; } h1 a { /* Logo Definitions */ display: block; height: 84px; outline: none;}#maincontent { padding-top: 10px;} #header { /* Header Background & Definitions */ background: url("images/header.jpg") top right no-repeat; height: 260px; position: relative;

[dsonesuk]

just amend these twobody {-x-system-font:none;background-color:#FF0000;background-image:url(images/bg.jpg);color:#242424;font-family:"Arial","Helvetica",sans-serif;font-size:11px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:150%;margin:0;padding:0;}#wrapper {background-color:#FFFFFF;margin:0 auto;width:773px;}

[gmarankie]

Nice! Thank you dsonesuk. One more quick question. How can I add a 4-6px border on either side of the content area so that the red background is not right up against it? I thought I could just increase the wrapper width but no results.Thanks again!

[alexnofue]

Hi, i'm guessing here, but anyway set the margin for that size#maincontent {padding-top: 10px;margin: 0 6px 0 6px;}i know there is a shorter way, but i find easier to remember margin: top right bottom left;

[dsonesuk]

add 6px to width of #wrapper width: 779px;add 3px padding to left, #left padding-left: 3px;add 3px padding to right, #right padding-right: 3px;you will also need to centre the background image for header change right to center, or increase width of image by 6px;done!

Edited July 14, 2009 by dsonesuk