gmarankie Posted July 10, 2009 Share Posted July 10, 2009 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; Link to comment Share on other sites More sharing options...
dsonesuk Posted July 10, 2009 Share Posted July 10, 2009 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;} Link to comment Share on other sites More sharing options...
gmarankie Posted July 14, 2009 Author Share Posted July 14, 2009 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! Link to comment Share on other sites More sharing options...
alexnofue Posted July 14, 2009 Share Posted July 14, 2009 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; Link to comment Share on other sites More sharing options...
dsonesuk Posted July 14, 2009 Share Posted July 14, 2009 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.