How to make background image extend down page??

[kendra69]

Hello All,

Here is the site: http://www.tolonopresbyterian.org. How do I make the background image extend or change the css (add image) to make the sidebars meet up with the footer (essentially making a rectangle with content in the middle).

Any help would be appreciated.

Thank you so much!

Kendra

The css:

CSS – http://www.tolonopresbyterian.org

* Collapse All
* Expand All

Code:

@charset “UTF-8”;
body {
margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #676356;
font: 100% “Lucida Grande”, Lucida, Verdana, sans-serif;
background: url(../img/shared_assets/mainbak_vine-1px.jpg) 50% 0;
}

#fauxBody {
background: url(../img/shared_assets/mainbak_vine-small.jpg) no-repeat 50% 0;
}

.twoColFixLtHdr #container {
width: 860px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
margin: 0 auto;
text-align: left;
}
.twoColFixLtHdr #header {
padding: 0 10px 0 20px;
height: 153px;
margin: 0 0 0 -69px;
background: url(../img/shared_assets/logotype-top_new.png) no-repeat 25px 23px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}

.twoColFixLtHdr #header #serviceTimes {
/* The total height for this element is 34 px. 24 in height and 10 in padding*/
width: 182px;
height: 24px;
background: url(../img/shared_assets/buttons/servicetimes_button-on.png) no-repeat;
font-size: 9px;
color: white;
padding-top: 10px;
padding-left: 14px;
margin-left: 63px;
}

.twoColFixLtHdr #header #serviceTimes a:link {
text-decoration: none;
color: white;
}

.twoColFixLtHdr #header #serviceTimes a:visited {
text-decoration: none;
color: white;
}

.twoColFixLtHdr #header #serviceTimes a:hover {
text-decoration: none;
color: #fef600;
}

.twoColFixLtHdr #header h1 {
margin: 0;
padding: 0;
}
.twoColFixLtHdr #header #welcome #top {
color: #800000;
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
margin-bottom: 9px;
}

#welcome {
padding-top: 12px;
padding-left: 275px;
text-decoration: none;
color: #800000;
font: normal normal 14px/15px Georgia, “Times New Roman”, Times, serif;
margin-right: 103px;
}

#welcome a:link {
color: #3d0800;
text-decoration: none;
background-color: #a54514;
font-size: 12px;
margin-left: 3px;
padding: 1px 5px 1px 4px;
display: inline;
border-style: none;
background-image: none;
}

#welcome a:visited {
color: #3d0800;
text-decoration: none;
background-color: #a54514;
font-size: 12px;
margin-left: 3px;
padding: 1px 5px 1px 4px;
display: inline;
border-style: none;
background-image: none;
}

#welcome a:hover {
color: #680c04;
text-decoration: none;
background-color: #d84100;
font-size: 12px;
margin-left: 3px;
padding: 1px 5px 1px 4px;
background-image: none;
}

#welcome a:active {
color: #680c04;
text-decoration: none;
background-color: #d84100;
font-size: 12px;
margin-left: 3px;
padding: 1px 5px 1px 4px;
background-image: none;
}

.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px;
color: #1a1a19;
font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
background-color: transparent;
}

.twoColFixLtHdr #mainContent #image {
border: 1px solid #c8c6ba;
width: 565px;
margin-top: 64px;
}

.twoColFixLtHdr #mainContent .intStory {
margin-left: 24px;
margin-right: 10px;
line-height: 16px;
color: #676356;
}

.twoColFixLtHdr #mainContent .intStory #class101schedule {
font-size: 9px;
margin-top: 26px;
margin-bottom: 36px;
padding: 0;
border-bottom: 1px dotted #bababa;
width: 534px;
}

.twoColFixLtHdr #mainContent .intStory #class101schedule td {
padding: 6px 10px;
}

.twoColFixLtHdr #mainContent .intStory #class101schedule .tdLite {
}

.twoColFixLtHdr #mainContent .intStory #class101schedule .tdDark {
background-color: #f0ecda;
color: #343434;
}

.twoColFixLtHdr #mainContent .intStory #class101schedule .hedr {
font-weight: bold;
color: black;
text-transform: uppercase;
border-bottom: 1px dotted #bababa;

}

.twoColFixLtHdr #mainContent .intStory .streamingSermons {
font-size: 9px;
margin-top: 26px;
margin-bottom: 36px;
padding: 0;
border-bottom: 1px dotted #bababa;
width: 534px;
}

.twoColFixLtHdr #mainContent .intStory .streamingSermons td {
padding: 6px 10px;
}

.twoColFixLtHdr #mainContent .intStory .streamingSermons .tdLite {
}

.twoColFixLtHdr #mainContent .intStory .streamingSermons .tdDark {
background-color: #f0ecda;
color: #343434;
}

.twoColFixLtHdr #mainContent .intStory .streamingSermons .hedr {
font-weight: bold;
color: black;
text-transform: uppercase;
border-bottom: 1px dotted #bababa;

}

.twoColFixLtHdr #mainContent .intStory a:link {
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #d30000;
}

.twoColFixLtHdr #mainContent .intStory a:visited {
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #d30000;
}

.twoColFixLtHdr #mainContent .intStory a:hover {
color: #4e4e4e;
text-decoration: underline;
}
.
twoColFixLtHdr #mainContent .intStory a:active {
color: #4e4e4e;
text-decoration: underline;
}

.twoColFixLtHdr #mainContent .intStory .imageBasic {
float: left;
margin-right: 14px;
margin-bottom: 12px;
}

.twoColFixLtHdr #mainContent .intStory .imageBasicRight {
float: right;
margin-bottom: 12px;
margin-left: 14px;
}

.twoColFixLtHdr #mainContent .intStory li {
list-style-image: none;
list-style-type: none;
background: url(../img/shared_assets/bullet-orange.png) no-repeat 0 4px;
padding: 0 0 2px 16px;
}

.twoColFixLtHdr #mainContent .intStory li a:link {
color: #2e2e2e;
text-decoration: none;
}

.twoColFixLtHdr #mainContent .intStory li a:visited {
color: #2e2e2e;
text-decoration: none;
}

.twoColFixLtHdr #mainContent .intStory li a:hover {
color: #b90000;
text-decoration: underline;
}

.twoColFixLtHdr #mainContent .intStory li a:active {
color: #b90000;
text-decoration: underline;
}

.twoColFixLtHdr #mainContent .intStory h4 {
text-decoration: none;
font: normal normal 18px Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding-top: 22px;
color: #404040;
}

.twoColFixLtHdr #mainContent .intStory h5 {
text-decoration: none;
margin: 0;
padding-top: 22px;
color: #404040;
font-variant: normal;
font-style: normal;
font-size: 12px;
}

.twoColFixLtHdr #mainContent .hedrInterior1 {
color: #ee850d;
text-transform: lowercase;
font: normal 26px Georgia, “Times New Roman”, Times, serif;
margin-top: 10px;
margin-bottom: 1px;
margin-left: 24px;
}

.twoColFixLtHdr #mainContent .hedrInterior1 .tier2 {
color: #c2ad98;
display: inline;
}

#subhedrItalics {
margin-bottom: 28px;
margin-top: 4px;
font: italic 14px Georgia, “Times New Roman”, Times, serif;
color: #cb4600;
margin-left: 24px;
}

#subhedrItalics .regularLink {
display: inline;
}

#subhedrItalics a:link {
font: italic 14px Georgia, “Times New Roman”, Times, serif;
color: #cb4600;
text-transform: lowercase;
border-style: none;
border-width: 0;
background-color: transparent;
margin: 0 0 28px;
padding: 0;
display: inline;
text-decoration: none;
background-image: none;
}

#subhedrItalics a:visited {
font: italic 14px Georgia, “Times New Roman”, Times, serif;
color: #cb4600;
text-transform: lowercase;
border-style: none;
border-width: 0;
background-color: transparent;
margin: 0 0 28px;
padding: 0;
display: inline;
text-decoration: none;
background-image: none;
}

#subhedrItalics a:hover {
color: #ff6c00;
text-decoration: underline;
}

#subhedrItalics a:active {
color: #ff6c00;
text-decoration: none;
}

.twoColFixLtHdr #mainContent .hedrBody1 {
background: url(../img/shared_assets/body_topHeaderBak-gradient.png) repeat-x;
height: 45px;
color: #9a3b0f;
font: 20px Georgia, “Times New Roman”, Times, serif;
padding-top: 10px;
padding-left: 28px;
margin-top: 18px;
}

.twoColFixLtHdr #mainContent .announcement {
margin-left: 28px;
margin-right: 14px;
color: #1a1a19;
}

.twoColFixLtHdr #mainContent .announcement a:link, a:visited {
color: #d30000;
text-decoration: none;
}

.twoColFixLtHdr #mainContent .announcement a:hover, a:active {
color: #4e4e4e;
text-decoration: underline;
}

.twoColFixLtHdr #mainContent .announcement .annoucePic{
float: right;
margin-left: 12px;
}

.twoColFixLtHdr #mainContent .announcement .buttonClick{
margin-bottom: 30px;
margin-top: 9px;
display: block;
border-style: none;
}

.twoColFixLtHdr #mainContent .announcement .eventDate {
color: #c96a3e;
font: 16px Georgia, “Times New Roman”, Times, serif;
margin-top: 10px;
margin-bottom: 8px;
}

.twoColFixLtHdr #mainContent .announcement .sig {
font-style: italic;
margin-top: 3px;
}

.horzBeveledLine {
background: url(../img/shared_assets/beveled-line.gif) repeat-x;
width: 100%;
height: 2px;
}

/*
.twoColFixLtHdr #mainContentBottom {
color: #1a1a19;
font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
margin-right: 0;
width: 860px;
background: url(../img/shared_assets/mainContentBak.jpg) 50%;
padding-top: 0;
padding-bottom: 0;
}

*/

/* @group 3TAB BOX */

/* Ths is commented out because 3tab.css has this code

.twoColFixLtHdr #mainContent #threetabBox {
height: 270px;
margin-top: 42px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody {
background-color: white;
width: 569px;
height: 244px;
border-left: 1px solid #c8c6ba;
border-bottom: 1px solid #c8c6ba;
border-right: 1px solid #c8c6ba;
padding-top: 2px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table {
padding-top: 4px;
padding-left: 4px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell1{
height: 231px;
width: 367px;
margin: 0;
padding: 0 5px 0 0;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2{
background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
width: 181px;
vertical-align: top;
color: #e4d0ad;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 p {
padding-left: 12px;
padding-right: 8px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
color: #efd29c;
font: 18px Georgia, “Times New Roman”, Times, serif;
padding-left: 12px;
padding-top: 12px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabRow {

}

.twoColFixLtHdr #mainContent #threetabBox #tabRow #tabTable {
height: 25px;
}

.twoColFixLtHdr #tabRow #tabRightside {
width: 9px;
background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
}

.twoColFixLtHdr #tabRow #tabLeftside {
width: 9px;
background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
}

.twoColFixLtHdr #tabRow #tabRightside-idle {
width: 9px;
background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
}

.twoColFixLtHdr #tabRow #tabLeftside-idle {
width: 9px;
background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
}

.twoColFixLtHdr #tabRow #tabTable .active {
vertical-align: top;
padding-top: 5px;
padding-right: 0;
background-color: white;
border-top: 1px solid #c8c6ba;
}

.twoColFixLtHdr #tabRow #tabTable .idle {
vertical-align: top;
padding-top: 5px;
padding-right: 6px;
padding-left: 6px;
margin: 0;
background-image: url(../img/shared_assets/tabbak_idle.gif);
color: #817c7b;
}

.twoColFixLtHdr #tabRow #tabTable .idle li {
list-style-image: none;
list-style-type: none;
background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
margin-left: 0;
padding-left: 14px;
}

.twoColFixLtHdr #tabRow #tabTable .idle a:link, a:visited {
color: #817c7b;
font-weight: normal;
font-style: normal;
text-decoration: none;
background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
padding-left: 16px;
}

.twoColFixLtHdr #tabRow #tabTable .idle a:hover {
color: #c75a23;
}

.twoColFixLtHdr #tabRow #home{
display: inline-block;
margin-top: auto;
margin-bottom: auto;
text-align: center;

padding-right: 9px;
color: #726155;
font-size: 12px;
background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 4px;
padding-left: 19px;
margin: 0;
}

*/
/* @end */

/* @group SIDEBARS */

.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 212px;
margin-left: 20px;
padding: 6px;
margin-top: 0;
}

/* @group GLOBALNAV */

#globalNav {
color: #5c5e52;
font: normal 16px Georgia, “Times New Roman”, Times, serif;
text-align: right;
text-decoration: none;
margin: 0;
padding: 0;
}

#globalNav #topButton {
border-top: 1px solid #d5d0ba;
font-size: 16px;
}

#globalNav a:link {
background-color: #eae8db;
display: block;
border-top: 1px solid white;
border-left: 1px solid #d5d0ba;
border-bottom: 1px solid #d5d0ba;
height: 26px;
margin: 0;
padding-top: 9px;
padding-right: 14px;
text-decoration: none;
font-weight: normal;
font-style: normal;
color: #5e5e52;
border-right: 1px solid #d5d0ba;
font-size: 16px;
background-image: none;
}

#globalNav a:visited {
background-color: #eae8db;
display: block;
border-top: 1px solid white;
border-left: 1px solid #d5d0ba;
border-bottom: 1px solid #d5d0ba;
height: 26px;
margin: 0;
padding-top: 9px;
padding-right: 14px;
text-decoration: none;
font-weight: normal;
font-style: normal;
color: #5e5e52;
border-right: 1px solid #d5d0ba;
font-size: 16px;
background-image: none;
}

#globalNav a:hover {
background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
color: #c75a23;
}

#globalNav a:active {
background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
color: #c75a23;
}

/* @end */

.twoColFixLtHdr #sidebar1 #sidebarMiddle {
color: #5c5e52;
background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
margin-top: 18px;
}

.currentEvents
{
text-align: left;
padding: 0;
margin: 5px 5px 8px 14px;
}

.currentEvents .currentEventDate
{
color: #c85a23;
text-transform: uppercase;
font-size: 11px;
}

.currentEvents .currentClassDetail {
color: #727267;
font-size: 11px;
}

.currentClassDetail a:link {
color: #727267;
background-image: none;
background-color: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}

.currentClassDetail a:visited {
color: #727267;
background-image: none;
background-color: transparent;
text-decoration: none;
margin: 0;
padding: 0;
}

.currentClassDetail a:hover {
color: #383838;
}

.currentClassDetail a:active {
color: #383838;
}

.dottedline {
background: url(../img/shared_assets/dottedline.gif) repeat-x 0 0;
height: 3px;
margin-right: 10px;
margin-left: 10px;
}

.twoColFixLtHdr #sidebar1 .hedrCalendar {
color: #9a3b0f;
font: 18px Georgia, “Times New Roman”, Times, serif;
background: url(../img/shared_assets/sidebars/hedr-calendarimage.png) no-repeat 8px 6px;
height: 36px;
padding-top: 14px;
padding-bottom: 9px;
padding-left: 61px;
}

.twoColFixLtHdr #sidebar1 .hedrPaper {
color: #9a3b0f;
font: 18px Georgia, “Times New Roman”, Times, serif;
background: url(../img/shared_assets/sidebars/hedr-paperimage.png) no-repeat 20px 10px;
height: 36px;
padding: 14px 12px 8px 64px;
}

.twoColFixLtHdr #sidebar1 .sidebarShort {
color: #5c5e52;
background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
margin-top: 24px;
padding-bottom: 50px;
}

/* @group Join and Webmaster box */

.twoColFixLtHdr #sidebar1 #boxWebmaster {
border: 1px solid #d5d0ba;
background-color: #eae8db;
color: #727267;
font-size: 10px;
font-weight: bold;
margin-top: 22px;
margin-bottom: 12px;
padding: 12px 12px 12px 16px;
}

.twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin {
background: url(../img/shared_assets/icon-join.gif) no-repeat 0 0;
padding-left: 28px;
height: 20px;
padding-top: 3px;
}

.twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin a:link, a:visited {
text-decoration: none;
color: #727267;
}

.twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster {
background: url(../img/shared_assets/icon-newsletter.gif) no-repeat 0 0;
padding-left: 28px;
height: 20px;
padding-top: 3px;
}

.twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster a:link, a:visited {
text-decoration: none;
color: #727267;
}

.twoColFixLtHdr #sidebar1 .announcementAddress {
font-size: 10px;
text-align: center;
padding-top: 26px;
padding-bottom: 10px;
line-height: 14px;
}

.twoColFixLtHdr #sidebar1 .announcementAddress a:link, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
color: black;
text-decoration: none;
}

.twoColFixLtHdr #sidebar1 .announcementAddress a:hover, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
color: #727267;
text-decoration: underline;
}

/* @end */

/* all the styles for the SURMON sidebar – BEGIN*/

.twoColFixLtHdr #sidebar1 .sidebarShort #surmonTitle {
color: #2c2824;
font-size: 11px;
margin-left: 18px;
}

.twoColFixLtHdr #sidebar1 .sidebarShort #surmonPastor {
font-size: 11px;
margin-left: 18px;
color: #7f746c;
margin-top: 4px;
}

.twoColFixLtHdr #sidebar1 .sidebarShort #surmonDate {
font-size: 11px;
display: inline-block;
color: #c85a23;
}

.twoColFixLtHdr #sidebar1 .sidebarShort .buttonTable {
margin-left: 16px;
margin-top: 8px;
padding: 0;
}

.twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell {
padding-right: 4px;
margin: 0;
}

.twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell .buttonImg{
border-width: 0;
border-style: none;
}

/* all the styles for the SURMON sidebar – END*/

/* @end */

.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: url(../img/shared_assets/footer-baktile.jpg) 0 0;
}

.twoColFixLtHdr #lowerNavi {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
padding: 10px 0;
font-size: 9px;
background: url(../img/shared_assets/logo-small_new.gif) no-repeat 655px 4px;
height: 37px;
color: #a8a899;
float: none;
display: block;
}

.twoColFixLtHdr #footer #copyright {
color: #9b9c8e;
font-size: 9px;
padding-bottom: 20px;
}

.twoColFixLtHdr #footer #copyright a:link, .twoColFixLtHdr #footer #copyright a:visited {
color: #9b9c8e;
font-size: 9px;
text-decoration: none;
}

.twoColFixLtHdr #footer #copyright a:hover, .twoColFixLtHdr #footer #copyright a:active {
color: black;
text-decoration: underline;
}

.twoColFixLtHdr #lowerNavi a:link {
color: #727267;
text-decoration: none;
}

.twoColFixLtHdr #lowerNavi a:visited {
color: #727267;
text-decoration: none;
}
.twoColFixLtHdr #lowerNavi a:hover {
color: black;
text-decoration: underline;
}

.twoColFixLtHdr #lowerNavi a:active {
color: black;
text-decoration: underline;
}

.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

iframe {
width: 100%;
height: 320px;
}.address {
font-size: 10px;
color: #c96a3e;
}

http://www.npctucson.org/tab1.html
http://www.npctucson.org/css/3tab.css

/* this page formats the three tabs on the home page*/

body {
margin: 0;
padding: 0;
}

/* @group 3TAB BOX */

#threetabBox {
margin-top: 42px;
}

#threetabBox #tabBoxbody {
background-color: white;
width: 568px;
height: 244px;
border-left: 1px solid #c8c6ba;
border-bottom: 1px solid #c8c6ba;
border-right: 1px solid #c8c6ba;
padding-top: 2px;
}

#threetabBox #tabBoxbody #tab1Table {
padding-top: 4px;
padding-left: 4px;
}

#threetabBox #tabBoxbody #tab1Table #cell1{
height: 231px;
width: 367px;
margin: 0;
padding: 0 5px 0 0;
}

#threetabBox #tabBoxbody #tab1Table #cell2{
background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
width: 181px;
vertical-align: top;
color: #e4d0ad;
}

#threetabBox #tabBoxbody #tab1Table #cell2 p {
padding-left: 12px;
padding-right: 8px;
font-size: 13px;
}

#threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
color: #efd29c;
font: 18px Georgia, “Times New Roman”, Times, serif;
padding-left: 12px;
padding-top: 12px;
}

.twoColFixLtHdr #mainContent #threetabBox #tabRow {
}

#threetabBox #tabRow #tabTable {
height: 25px;

font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
}

#tabRow #tabRightside {
width: 9px;
background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
}

#tabRow #tabLeftside {
width: 9px;
background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
}

#tabRow #tabRightside-idle {
width: 9px;
background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
}

#tabRow #tabLeftside-idle {
width: 9px;
background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
}

#tabRow #tabTable .active {
vertical-align: top;
padding-top: 5px;
padding-right: 6px;
padding-left: 6px;
margin: 0;
background-color: white;
border-top: 1px solid #c8c6ba;
}

#tabRow #tabTable .idle {
vertical-align: top;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
margin: 0;
color: #817c7b;
background-image: url(../img/shared_assets/tabbak_idle.png);
}

#tabRow #tabTable .idle a:link {
color: #817c7b;
font-weight: normal;
font-style: normal;
text-decoration: none;
background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
padding-left: 19px;
}

#tabRow #tabTable .idle a:visited {
color: #817c7b;
font-weight: normal;
font-style: normal;
text-decoration: none;
background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
padding-left: 19px;
}

#tabRow #tabTable .idle a:hover {
color: #c75a23;
}

#tabRow #home{
display: inline-block;
margin-top: auto;
margin-bottom: auto;
text-align: center;
color: #726155;
background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 3px;
padding-left: 19px;
margin: 0;
font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
}

/* @end */

The html:

Code:

Service times & directions

Welcome to First Presbyterian Church of Tolono!

I came so that they may have life,
and have it abundantly” John 10:10Learn
more about us.

site home
about tolono presbyterian
news & events
our calendar

our beliefs
our ministries
mission
daycare & preschool
resources
join us
contact us

Upcoming events

WYN Starts up Again!

Sign-up September 18 at 5:30 p.m.

First Presbyterian Church of Tolono
104 E. Vine St.
Tolono, IL 61880
(217) 485-3725
[email protected]

Recent sermon

“. . .!”

by Kerry Bean|

09.05.09

Highlights

Welcome

"If you are new to our First Presbyterian Church of Tolono Web site I welcome you! Please browse around and . . .”

– Rev. Kerry Bean, Designated Pastor

home •
about tolono presbyterian •
news & events •
our calendar
our beliefs •
our ministries •
mission •
daycare & preschool •

resources •
join us •
contact us

All Rights Reserved.
Copyright © 2009 First Presbyterian Church of Tolono, IL, (USA).

[kendra69]

So I just need to make the sidebars longer? How do I know how long to make the sidebars because I don’t know how much info. will be there – seems like there has to be a better way.

Thanks for the info. though.

Kendra

[bclouatre]

Take a 1px slice of the sidebars on each side. Set divs for the size of the sidebar currently, make that 1px img the background img for those divs and place them where the sidebars would be. set the repeat to repeat y.

What this does is repeats the image for the size of the content no matter how big it is.

[Author]

Posts