CSS - Depend Background On Text

I am making this table area and I want the table to have a image as a background to give it more of a nice detail to it but I can't figure out how to get it to work for the table.

Thank you.

I have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out.

Here's the css because I'm not allowed to post the url

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {art
margin: 0;
padding: 0;
background-color: #B8E700;
background-image: none;
text-align: center;

}

body {

font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
text-align: center;
}


body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;

}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}

/* Normal link */
a {
color: #006699;
text-decoration: underline;
}

a:hover, a:active, a:focus {
color: #333333;
text-decoration: underline;
}

/* Heading */
h1 {
font-size: 180%;
}

h2 {
font-size: 150%;
}

h3 {
font-size: 125%;
}

h4 {
font-size: 100%;
text-transform: uppercase;
}

ul {
list-style: none;
}

ul li {
padding-left: 30px;
background: url(../images/bullet.gif) no-repeat 18px 8px;
line-height: 180%;
}

ol li {
margin-left: 35px;
line-height: 180%;
}

th {
padding: 5px;
font-weight: bold;
text-align: left;
}
img {
border: none;
}



/* Note Style */
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}

p.download {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}

/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/icon_list.gif) no-repeat 0 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}

/* Bignumber */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
background: url(../images/ol-bg.gif) no-repeat top left;
color: #7BA566;
font: bold 20px/normal Arial, sans-serif;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
background: url(../images/author.gif) no-repeat center left;
font-weight: bold;
}

div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}

div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}

div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}

div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}

div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}

div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}

/* Legend */
.legend-title {
margin: 0;
padding: 0 3px;
float: left;
display: block;
background: #B8E700;
font-weight: bold;

top: -10px;
left: 7px;
}

.legend {
margin: 20px 0;
padding: 0 10px;
border: 1px solid #CACACC;
background: #FFFFFF;
position: relative;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator {
clear: both;
display: block;
height: 20px;
}

.column_separator {
padding: 0 25px;
}

/* content tables */
td.sectiontableheader {
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}

table.contentpane {
border: none;
width: 100%;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
float: right;
}

table.contenttoc a {
text-decoration: none;
}

table.contenttoc td {
padding: 1px 5px 1px 25px;
background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}

table.contenttoc th {
padding: 0 0 3PX;
border-bottom: 1px solid #CCCCCC;
text-indent: 5px;
}

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}

table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
padding: 4px!important;
border-collapse: collapse;
border-spacing: 0;
}

table.pollstableborder tr.sectiontableentry1 td {
background: #ECECEC;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px!important;
}

table.adminform {
}

.adminform .inputbox {
}

.blog_more {
padding: 10px 0;

}

.blog_more strong {
margin: 0 0 5px;
display: block;
font-size: 125%;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
margin: 0;
padding: 0 0 0 17px;
background: url(../images/bullet.gif) no-repeat 6px 8px;
}

.category {
font-weight: bold;
}

h1.componentheading, .componentheading {
padding: 5px 0 15px;
margin: 0 0 10px;

}

.componentheading {
font-size: 200%;
font-weight: bold;
}

.contentdescription {
padding-bottom: 30px;
}

h2.contentheading, .contentheading {
padding: 5px 0 8px;
margin: 0;
font-weight: normal;
}

table.blog .contentheading {
font-size: 150%;
}

.contentheading {
font-size: 200%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
text-decoration: none !important;
}

a.readon {
float: left;
margin-top: 10px;
padding: 1px 5px 1px 14px;
border: 1px solid #B8E700;
display: block;
background: url(../images/arrow.png) no-repeat 5px 48%;
color: #006699;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}

a.readon:hover, a.readon:active, a.readon:focus {
border: 1px solid #ECECEC;
background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

.moduletable {
padding: 0;
}

ul.pagination {
margin: 15px auto;
padding: 10px 0;

}

ul.pagination li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

ul.pagination li span{
padding: 2px 5px;
}

ul.pagination a {
padding: 2px 5px;
border: 1px solid #B8E700;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
border: 1px solid #ECECEC;
background: #FFFFFF;
}

.pagenavbar {
padding-left: 14px;
}

.pagenavcounter {
padding: 8px 14px 0 14px;
}

.sectiontableheader {
padding: 8px 5px;
background: #444444;
color: #FFFFFF;
}

.sectiontableheader a {
color: #FFFFFF;
}

tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom;
}

tr.sectiontableentry2 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
}

.smalldark {
text-align: left;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* META
--------------------------------------------------------- */
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}

.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 2px;
}

.modifydate {
width: 100%;
float: left;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 7px 5px 0 0;
border: 0;
float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
width: 100%;
margin: 0;

}

#ja-container2 {
padding: 20px 0;
background: url(../images/c-bg2.gif) no-repeat 18% 0;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-mainbody, #ja-mainbody-fl {
float: left;
width: 80%;
}

#ja-mainbody #ja-contentwrap {
float: right;
width: 75%;
}

#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 100%;
}

#ja-mainbody-f, #ja-mainbody-fr {
float: none;
width: 100%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 74.8%;
float: right;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
float: left;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-content {
padding: 60px 20px 0 40px;
}
#ja-contentwrap {
min-height: 300px;
height: auto;
}
* html #ja-contentwrap {
height: 300px;
}
#ja-mainbody-fl #ja-content {
padding-left: 0;
}

#ja-mainbody-f #ja-content {
padding: 0;
}

/* Full */

#ja-containerwrap-f #ja-containerwrap2 {
background: none;
}

#ja-containerwrap-f #ja-container,
#ja-containerwrap-f #ja-container2 {
background: none;
}

/* Full left */

#ja-containerwrap-fl #ja-containerwrap2,
#ja-containerwrap-fl #ja-container,
#ja-containerwrap-fl #ja-container2 {
background: none;
}


/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
color: #76C900;
line-height: normal;
height: 80px;
}

#ja-header {
position: fixed;
height: 80px;
color: #76C900;
}

.ja-headermask {
width: 602px;
display: block;
color: #76C900;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #76C900;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {

bottom: 15px;
position: absolute;
top:40px;
left:750px;
height:25px
}

#ja-search .inputbox
{
width:120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;

font-size: 92%;

}

/* MAIN NAVIGATION
--------------------------------------------------------- */

#ja-pathway {
font-size: 92%;
}

#ja-pathway strong {
margin-right: 5px;
font-weight: normal;
}

#ja-pathway a {
text-decoration: none;
}

#ja-pathway img {
margin: 1px 5px;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable,
div.moduletable_menu,
div.moduletable_text {
padding: 0 0 20px;
margin-bottom: 15px;

}

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

/* Module rounded */
div.module h3 {
margin: 0 -15px 10px;
padding: 8px 15px 5px;
border-bottom: 2px solid #B8E700;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

div.module_black,
div.module_green,
div.module_blue,
div.module_red,
div.module {
margin-bottom: 20px;
float: left;
clear: both;
width: 100%;
background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF;
}

div.module div {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

div.module div div {
background: url(../images/b-tr.gif) no-repeat top right;
}

div.module div div div {
padding: 0 15px 10px;
background: url(../images/b-tl.gif) no-repeat top left;
}

div.module_black div div div div,
div.module_green div div div div,
div.module_blue div div div div,
div.module_red div div div div,
div.module_text div div div div,
div.module div div div div {
margin: 0;
padding: 0;
float: none;
width: 99%;
background: none;
}

div.module_text h3 {
margin: 0 0 10px;
width: 100%;
clear: both;
display: block;
overflow: hidden;
}

div.module_text span {
padding: 0 3px 0 0;
float: left;
clear: both;
display: block;
background: #B8E700;
font-weight: bold;
}

div.module_text {
margin-bottom: 20px;
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/bt-br.gif) no-repeat bottom right #B8E700;
}

div.module_text div {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text div div {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text div div div {
padding: 0 15px 10px;
display: block;
background: url(../images/bt-tl.gif) no-repeat top left;
}

div.banneritem_text {
padding: 5px 0 !important;
}




/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-right: 30px;
background: none;
}

.ja-box-right div.moduletable {
padding-left: 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

.ja-box-center div.moduletable {
padding: 0 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

#ja-botsl h3 {
background: none;
}

#ja-botslwrap {
background: #B8E700;
color: #B8E700;
}

#ja-botsl {
padding: 15px 0;
}

#ja-botsl div.moduletable {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

#ja-botsl h3 {
margin: 0 0 12px;
padding: 0;
color: #FFFFFF;
}

#ja-botsl a {
color: #B8E700;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
padding: 0;
margin: 0 !important;
}

#ja-botsl ul li {
padding: 0 0 0 15px;
margin: 0;
background: url(../images/bullet2.gif) no-repeat 3px 8px;
}

#ja-botsl ol li {
margin-left: 25px;
padding: 0 !important;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator {
display: none;
}

#ja-botsl table {
border-spacing: 0;
border-collapse: collapse;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
padding: 5px 0 30px;
}

#ja-footer {
padding: 0;
color: #B8E700;
}

#ja-footer .copyright {

display: block;
color: #B8E700;
font-style: normal;
font-size: 92%;
}

#ja-footer ul {
margin: 0 0 5px;
padding: 0;
}

#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

#ja-footer li a {
display: inline;
color: #666666;
padding: 0 15px 0 0;
font-weight: bold;
font-size: 92%;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
}

#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
color: #333333;
text-decoration: none;
}

.ja-cert {
font-size: 92%;
top: 18px;
}

.ja-cert a {
margin: 0 0 0 5px;
padding: 0;
border: none;
border: none;
text-decoration: none;
}

.ja-cert a span {
display: none;
}

.ja-cert a img {
border: none;
}

.banneritem {
display: block;
margin-top: 15px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 8px;
right: 70px;
}

ul.ja-usertools-font li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

/*collapsible h3*/
h3.show {
background: url(../images/arrow2.png) no-repeat 90% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/arrow3.png) no-repeat 90% 60%;
cursor: pointer;
}

/*others*/
#ja-banner {
margin: 15px 0;
text-align: center;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
background: none!important;
text-decoration: none!important;
}

#form-login p {
margin: 0 0 5px;
}

#form-login ul {
margin: 10px 0 0;
}

#form-login .inputbox {
width: 90%;
}

.clr {
clear: both;
}

.hasTip img {
margin: 10px 5px 0 0;
border: none;
}

/* Tooltips */
.tool-tip {
float: left;
border: 1px solid #D4D5AA;
padding: 5px;
background: #FFFFCC;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
}

.tool-text {
margin: 0;
font-size: 100%;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
padding: 0;
margin: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
padding: 5px;
margin: 0;
color: #FFFFFF;
}

/* System Standard Messages */
#system-message dd.message ul {
background: #006699;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
background: #BF0000;
border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
background: #EE9600;
border: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

#Table_01
{
left:0px;
top:0px;
width:950px;
overflow: hidden;
}


#top01 {
position:fixed;
left:0px;
top:0px;
width:248px;
height:68px;
background: url(../../../images/top01.jpg);
background-repeat:no-repeat;


}

#logo {
position:fixed;
left:248px;
top:0px;
width:89px;
height:68px;
background:url(../../../images/logo.jpg);
background-repeat:no-repeat;
}

#top02 {
position:fixed;
left:337px;
top:0px;
width:312px;
height:68px;
background:url(../../../images/top02.jpg);
background-repeat:no-repeat;
}

#index-04 {
position:fixed;
left:649px;
top:0px;
width:301px;
height:74px;
background:url(../../../images/index_04.jpg);
background-repeat:no-repeat;
}

#top03 {
position:fixed;
left:0px;
top:68px;
width:297px;
height:168px;
background:url(../../../images/top03.jpg);
background-repeat:no-repeat;
}

#index-06 {
position:fixed;
left:297px;
top:68px;
width:352px;
height:6px;
background:url(../../../images/index_06.jpg);
background-repeat:no-repeat;
}

#index-07 {
position:fixed;
left:297px;
top:74px;
width:288px;
height:172px;
background:url(../../../images/index_07.jpg);
background-repeat:no-repeat;
}

#top04 {
position:fixed;
left:585px;
top:74px;
width:317px;
height:165px;
background:url(../../../images/top04.jpg);
background-repeat:no-repeat;
}

#index-09 {
position:fixed;
left:902px;
top:74px;
width:48px;
height:172px;
background:url(../../../images/index_09.jpg);
}

#index-10 {
position:fixed;
left:0px;
top:236px;
width:297px;
height:10px;
background:url(../../../images/index_10.jpg);
}

#index-11 {
position:fixed;
left:585px;
top:239px;
width:317px;
height:7px;
background:url(../../../images/index_11.jpg);
}

#index-12 {
position:fixed;
left:0px;
top:246px;
width:1px;
height:33px;
background:url(../../../images/index_12.jpg);
}

#index-13 {
position:fixed;
left:1px;
top:246px;
width:949px;
height:28px;
background:url(../../../images/index_13.jpg);
}

#bottom01 {

left:0px;
top:653px;
width:950px;
height:32px;
background:url(../../../images/bottom01.jpg);
}


#othersunnypages-14
{
background:url(../../../images/othersunnypages_14.jpg);
position:fixed;
top:247px;
left: 1px;
width: 949px;
height: 5px;
}

#othersunnypages-15
{
background-image:url(../../../images/othersunnypages_15.jpg);
position:fixed;
top:279px;
width:152px;
height:142px;
}

#othersunnypages-16
{
background-image:url(../../../images/othersunnypages_16.jpg);
position:fixed;
top:279px;
left: 152px;
width: 798px;
height: 41px;
}

#othersunnypages-17
{
background-image:url(../../../images/othersunnypages_17.jpg);
position:fixed;
top:320px;
left: 152px;
width:510px;
height:23px;
}

#othersunnypages-18 {
background-image:url(../../../images/othersunnypages_18.jpg);
position:fixed;
top:320px;
left: 662px;
width:33px;
height:23px;

}

#othersunnypages-19 {
background-image:url(../../../images/othersunnypages_19.jpg);
position:fixed;
top:320px;
left: 695px;
width:203px;
height:23px;

}

#othersunnypages-20
{
background-image:url(../../../images/othersunnypages_20.jpg);
position:fixed;
top:320px;
left:898px;
width:52px;
height:23px;
}

#othersunnypages-21 {
background-image:url(../../../images/othersunnypages_21.jpg);
position:fixed;
top:343px;
left: 152px;
width:504px;
height:24px;
}

#othersunnypages-22 {
background-image:url(../../../images/othersunnypages_22.jpg);
position:fixed;
top:343px;
left: 656px;
width:43px;
height:24px;
}

#othersunnypages-23 {
background-image:url(../../../images/othersunnypages_23.jpg);
position:fixed;
top:343px;
left: 699px;
width:200px;
height:24px;
}

#othersunnypages-24 {
background-image:url(../../../images/othersunnypages_24.jpg);
position:fixed;
top:343px;
left: 899px;
width:51px;
height:24px;
}

#othersunnypages-25 {
background-image: url(../../../images/othersunnypages_25.jpg);
position:fixed;
top: 367px;
left: 152px;
width:504px;
height:54px;
}

#othersunnypages-26 {
background-image:url(../../../images/othersunnypages_26.jpg);
position:fixed;
top:367px;
left: 656px;
width:43px;
height:54px;
}

#othersunnypages-27 {
background-image:url(../../../images/othersunnypages_27.jpg);
position:fixed;
top:367px;
left: 699px;
width:193px;
height:54px;
}

#othersunnypages-28 {
background-image:url(../../../images/othersunnypages_28.jpg);
position:fixed;
top:367px;
left: 892px;
width:58px;
height:54px;
}

#othersunnypages-29 {
background-image:url(../../../images/othersunnypages_29.jpg);
position:fixed;
top:421px;
left: 0px;
width:69px;
height:201px;

}

#othersunnypages-30 {
background-image:url(../../../images/othersunnypages_30.jpg);
position:fixed;
top:421px;
left:69px;
width:587px;
height:201px;
}

#othersunnypages-31 {
background-image:url(../../../images/othersunnypages_31.jpg);

top:421px;
left: 656px;
width:43px;
height:201px;
}

#othersunnypages-32 {
background-image:url(../../../images/othersunnypages_32.jpg);
position:fixed;
top:421px;
left: 699px;
width:193px;
height:201px;
}

#othersunnypages-33 {
background-image: url(../../../images/othersunnypages_33.jpg);
position:fixed;
top:421px;
left: 892px;
width:58px;
height:201px;
}

#othersunnypages-34 {
background-image:url(../../../images/othersunnypages_34.jpg);
position:fixed;
top:622px;
left: 0px;
width:950px;
height:31px;
}


#othersunnypages-36 {
background-image:url(../../../images/othersunnypages_36.jpg);
position:fixed;
top:685px;
left:0px;
width:950px;
height:15px;
}

I have a floating div on top of a larger div that has a background. What I would like is to have the background of the floating div transparent so the background can be seen. However, when I make it transparent, it forces my text to be transparent also.

Any ways around this?

I currently have a PRE tag inside a DIV tag. The DIV tag has a limited size.
Often a long line of text will stretch outside the PRE tag. I do not mind this horisontal overflow as
the contents has more meaning when it is not wrapped.

My problem is that this overflow text flows under the right hand navigation column on my site. I would like the
PRE tag to be above everything else on my site. How can I do this?

The overflow text seems to have no background, making it hard to read if it is over an image.
Is there any way to get overflow text to have a brackground without expanding the PRE tag?

Hi,

can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style.

<td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br />
<a href="neoceram.php">Design</a> <br />
<a href="pyroceram.php">Development</a> <br />
<a href="patterns.php">Management</a> <br />
<a href="drilling.php">Portfolio</a> <br />
<a href="tints.php">Contact Us</a> <br /></td> </tr>

.td_1 {
background-image:url(nav_bar.gif);
background-position:left;
background-repeat:no-repeat;
background-color: transparent;
padding-top: 66px;
width: 154;
font-size: 12px;
font-weight:600;
line-height: 21px;
position: absolute;
font-family:Arial, Helvetica, sans-serif;
}

Thanks for all your help,

mdh2000

Hello. I am trying to center the text in my right column menu found at http://www.invisionshosting.com/v2/terms_of_service.php

If you take a look, you will see that the h2 (title bar) as well as each button has the text positioned at the top, and I need the text positioned in the center. I have tried padding-top: 5px; to position the text to the center, but just as I thought it would do, it moves the background down as well, causing a gap to form between each element. I need each button, including the title, to remain with a tight fit as it is now while positioning the text in the center.

The CSS I am using is as follows:

Code:

#menu_right {
	width: 200px;
	color: #702208;
	font-family: Arial, verdana, san-serif;
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0;
	font-size: 11px;
	}
	#menu_right h2 {
		color:#ffffff;
		background-image: url(../images/right_column_header.png);
		background-repeat: no-repeat;
		width: 200px; 
		height: 28px;
		text-indent: 10px;
		}
	#menu_right ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 200px; 												/* Main Menu Item widths */
		}

.button_main_1 {													/* For Rest State */
	background-image:url(../images/right_column_button_off.jpg);
	background-repeat: no-repeat;
	width: 200px;
	height: 28px;
	color: #ffe7b8;
	text-indent: 30px;
	font-size: 13px;
	}
	.button_main_1 ul li {
		position: relative;
		}
	.button_main_1 a {												/* For Rest State */
		width: 200px;
		height: 28px;
		display: block;
		color: #236a9d;
		text-decoration: none;
		}
	.button_main_1 a:hover {										/* For Rest State */
		background-image:url(../images/right_column_button_over.jpg);
		background-repeat: no-repeat;
		width: 200px;
		height: 28px;
		display: block;
		color: #ffffff;
		text-decoration: none;
		}

The HTML is as follows:

Code:

<div id="menu_right">
 
<h2 class="menu_left">Title</h2>
<ul class="button_main_1">
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
</ul>

</div>

I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it!

For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so!

If anyone could even just give me the proper name for it so I can google it, I would be very thankful!

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

Hi All,
I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls.

Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on.

Thanks

URL

Hi All,
It has been 20 years since I last wrote a program and CSS wasn't even thought of then so I need a little help.

I wish to place a text area/box with a background I can put text on top of in my html. Any image should work. I wish the text area/box to start 15% from the left edge and cover 70% of the screen width and be as high as the image. I would like the image to automatically re-size to take care of different screen resolutions. I would like to have no scroll bars on the text area/box and I would like the text to be fixed so it cannot be changed by someone typing in the text area/box. However for future reference I would like to know how to turn the scroll bars on so the text scrolls but the image stays fixed.

I have included the html I thought would work but doesn't.

Any help would be greatly appreciated,

Thanks,
**** Roose

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8">
<meta name="revisit-after" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR" >
<title>TestBox</title>
<style tyle=text/css>
txta {
width: 735px;
background-image: url(new.jpg);
border: 1px solid #781351;
height: 80px;
padding: 1px;
position: absolute;
left:15%;
}
</style>
</head>
<body>
<div id="txta">
<textarea name="t1" width "735px" height: "85px">
</div>
</body>
</html>

Hi,

I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser.

How can I keep the text in the same position on all monitors?

Here is what I have so far (I am very new to css):

#content {
text-align: left;
width: 1060px;
padding: 0px 30px 0px 30px;
margin-left: auto;
margin-right: auto;
}

Thanks
Cameron

I can make my menu using ul/li elements with either a background image with text in the li or I can just create an image with text in it and having alt text.

Is there a difference in regards to search engines and is there any other reason that I would want to have actual text with a background img on the li?

The reason that I would want to use images with the text built into them is that the text will no be resized and I can use a specific font.

When a user has the text display options set to big, the text gets out of the box. Does anybody have an idea to fix this or any alternative I can use so that this doesnt happen? I know its not the best design or css implementation but its my first css website:

http://aplistia.com/unitedTours/UnitedTours.php
(look at the white box surrounding the links: home, reserve, contact etc in the left side of the website.)

the css is he
http://aplistia.com/unitedTours/booksite.css

Hi All,

Here's my issue... I have decided to try an all css-based layout which will incorporate:

1. a background image (770px wide) that repeats on the y axis in the BODY tag

2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image

The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ]

The problem is as follows:

Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time.

To see the problem: http://publictrust.ca/css/default.htm

The css is as follows:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #260D0D;
font-size: 0.8em;
background-color: #260D0D;
margin: 0px;
padding: 0px;
background-image: url(../images/body-bg.jpg);
background-repeat: repeat-y;
background-position: center center;
}
#divHeader {
margin: 0px;
width: 750px;
color: #260D0D;
}
#divMain {
background-color: #EDCCA1;
background-image: url(../images/container-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 750px;
color: #260D0D;
}
#divFooter {
text-align: center;
font-size: 0.7em;
margin: 25px 0 0 0;
}
#divHeader, #divMain, #divFooter {
width:750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #260D0D;
}
#leftMenu {
float:left;
margin:130px 0 0 5px;
padding: 0px;
width:150px;
}
#divMainContent {
float:right;
width:500px;
margin: 150px 5px 50px 5px;
border-top: 1px solid #260D0D;
}

The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css

Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter.

Thanks in Advance,

mne

Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this?

Thanks