I would like to keep the left and right content boxes as thier default. However for the center I would like to use one scroll parchment as the background image for all the center content with a divider separating the content title boxes. Basicly, so that the image would be a seemless parchment with muliple content title boxes. My question is how do i get this to work so that I do not get one image of my scroll per content title.


eg.

center content background image start

Welcome.....

-------------

News....

-------------

about us...

center content background image end


Hope I didnt confuse the question too much..

Thanks for any help in advance

Hi Asiria!

I put together some code which I think is what you are describing... Here is a screenshot




Setting up the site:

• Fix the column widths:
  
  With this design, the middle is 450 pixels wide and both sides are 175 pixels width for a total width of 800 pixels. This is where you set this values in the control panel
  
  Overall page:
  
  Control Panel > Style & Colors > Page Style > Page Body Tab
  
  Content Area Width: 800px
  Content Area Alignment: Center
  Content Box Background: ignore this, you set it in the CSS
  
  
  
  Each Tab: (this example is just for the Home tab)
  
  Control Panel > Site Pages > (Home) - Display Options
  
  Left Pane Width: 175px
  Center Pane Width: 450px
  Right Pane Width: 175px
  
  
• Make a Footer Area
  
  Control Panel > Style & Colors > Footer (under Advanced Style Settings in the right side panel)
  
  Add this line at the top, enable and save changes.
  
  <div class="FooterArea"></div>
  

The CSS:

I don't know if you have started using your custom stylesheet, so I'll include all the CSS I used in the example.

Control Panel > Style & Colors > Custom StyleSheet (under Advanced Style Settings in the right side panel)

Copy the CSS below and paste it into the Custom StyleSheet area, check the "Enable" box and Save.

html, body, div, p, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
body {background-color: #222; color:#000;}
form {padding: 3px;border: none;}
img { border: none; }
hr { color: #2d2d2d; }
 table { color: #2f17000;font-family: Verdana, Tahoma,Segoe,sans-serif;font-size: 9pt; }
.MessageAuthorLinkCell1{width: 135px;}
.MessageAuthorInfoCell1{text-align: center;width: 135px;vertical-align: top;}
.ContentBoxTitle {color: #2f17000;margin-top: 0px;padding-top: 0px;}
.StateBar {background-color: transparent; color: #dddddd; text-align: center;padding: 5px;}
.TabBar {background-color: transparent; padding: 0px; margin:auto; width:700px; }
.SelectedTab {background-color: #2d2d2d;color: #daca92;border: solid 1px #2d2d2d;border-color: #2d2d2d;text-align: center;padding: 2px;}
.UnSelectedTab {background-color: #000000;color: #daca92;border: solid 1px #2d2d2d;text-align: center;cursor: pointer;padding: 2px;}
.UnSelectedTabMo {background-color: #2d2d2d;color: #daca92;border: solid 1px #2d2d2d;border-color: #2d2d2d;cursor: pointer;text-align: center;padding: 2px;}
.MoGridRow { text-align: left; }
.AltGridRow{background-color: #222222;color: #daca92;}
.NormGridRow{background-color: #111111;color: #daca92;}
.ContentBox {background-color: #000000;border: solid 1px #2d2d2d;}
.ContentBoxTitle {padding: 5px;background-color: #2d2d2d;color: #daca92;}
.ContentBoxBody {background-color: #000000;color: #daca92;padding: 5px;}
.ContentTable { background-color: #000000;color: #daca92;font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
a:active {color: #c8c8e8; text-decoration: none;}
a:link {color: #c8c8e8; text-decoration: none;}
a:hover {color: #c8c8e8; text-decoration: underline;}
a:visited {color: #c8c8e8; text-decoration: none;}

.CenterContentZone {padding: 0px 30px;}
.CenterContentZone .ContentBox {background-color: transparent; border: 0px;}
.CenterContentZone .ContentBoxTitle {padding: 5px;background-color: transparent; color: #2f1700; font-weight:bold;}
.CenterContentZone .ContentBoxBody {background-color: transparent; color: #2f1700; padding: 5px; border: #000000 0px solid; border-bottom-width:1px;}
.CenterContentZone .ContentTable { background-color: transparent; color: #2f1700;font-family: Verdana,Tahoma,Segoe,sans-serif; font-size: 9pt;}
.CenterContentZone .ForumCategoryHeader {background-color: #000000; color: #daca92; border: #2d2d2d 1px solid; padding: 0px 5px; margin: 1px;}
.CenterContentZone .MoGridRow {background: #cccccc; text-align: left; }
.CenterContentZone .AltGridRow {background: transparent; color: #2f1700;}
.CenterContentZone .NormGridRow {background: transparent; color: #2f1700;}
.CenterContentZone a:active {color: #3d1f1f; text-decoration: none;}
.CenterContentZone a:link {color: #2f1700; text-decoration: none;}
.CenterContentZone a:hover {color: #ffffff; text-decoration: none;}
.CenterContentZone a:visited {color: #9d4f4f; text-decoration: none;}

#ctl00_ContentPlaceHolder1_ContentRow {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrolltop-2.gif) center top no-repeat;}
#ctl00_ContentPlaceHolder1_ContentTable {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollmiddle-1.gif) center top repeat-y; }
.FooterArea {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollbottom-1.gif) center top no-repeat; height: 176px;}

Customizing

• The CSS in grey is the CSS for the side content boxes.
  
  
• The CSS starting with ".CenterContentZone" styles the center column with the scroll background image
  
  
• The CSS in blue is where the background color is defined... almost all are "transparent" to allow the background image to show through.
  
  
• The CSS in green is where the horizontal line is defined that separates each box
  
  
• The CSS in orange is the URL to the background images (the scroll)