CSS - Background Image Trouble

I am trying to use background-image to emulate using a background="" in a cell.

I am getting the image to show up using

background-image: url(url);

but it repeats. when i add

background-image: url(url) no-repeat;

the image doesn't show up, even once.

What am I doing wrong?

I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column.

I'm fairly certain I've narrowed it down to the bit of CSS code he

Code:

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work.

Does anyone have any suggestions or solutions? I'd appreciate it!

Here's the entire stylesheet, for reference:

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border:none;
}

table td {
	vertical-align:top;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #666666;
	background: #0d789c url(../images/bg.jpg) top center repeat-x;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #0d789c;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
	color: #0d789c;
}

input.button {
 cursor: pointer;
 vertical-align: bottom;
 border: 0px;
 background:none;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align:justify;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#header {
	margin:0 auto;
	width:940px;
}

.left_bg {
	background: transparent url(../images/left_bg.jpg) top right no-repeat;
	width:70px;
}

.middle_bg {
	background: transparent url(../images/.jpg) top right no-repeat;
	width:800px;
}

.right_bg {
	background: transparent url(../images/right_bg.jpg) top left no-repeat;
	width:70px;
}

.top_bg {
	background: transparent url(../images/top_bg.jpg) top center no-repeat;
	width:800px;
	height:45px;
}

.rightside {
	background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
	width:185px;
	height:173px;
}

.header_bg {
	background: transparent url(../images/header_bg.jpg) top center no-repeat;
	width:615px;
	height:173px;
}



#page_bg {
	padding: 0;
	margin:0px auto;
}

#top {
	width:800px;
	margin:0 auto;
	padding:0;
}

div.center {
  padding:0;
}

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

#logo {
	padding:47px 50px 0 50px;
	height:100px;
	text-align:left;
	margin:0 auto;
} 

#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	padding:0px;
	margin:0;
	line-height:1.4em;
	letter-spacing:2px;
	color:#fefefe;
	text-decoration:none;
}

div.newsflash {
	height:150px;
	padding:10px;
	overflow: hidden;
	color:#fff;
	text-align:left;
}

div#tabarea {
	margin: 0;
	width:615px;
	height:26px;
	text-align:left;
}

#footer {
	width:800px;
	margin:0 auto;
}

.validation {
	float:right;
	padding:8px 20px 0 0;
}

#footer .footer {
	background: transparent url(../images/footer.jpg) top center no-repeat;
	height:28px;
	width:800px;
}

#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-right: 250px;
	text-align: left;
}

#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 20px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}

#area {
	padding: 0;
	width:100%;
/* color:#d1c8ab; */
}

#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}



#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
.pill {
  margin:0px 0 0 1px;
  text-align:left;
}

td.pill_m {
  padding: 0;
  margin: 0 10px;
  width: auto;
  text-align:center;
}

#pillmenu {
  white-space: nowrap;
  height: 26px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;

  list-style:none;
}

#pillmenu li {
	float: left;
	margin: 0px 1px 0 0;
	padding: 0;
	background: transparent;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 2px 10px 0 10px;
  color: #fff;
  text-decoration: none;
  background: transparent;
}


#pillmenu a:hover {
  text-decoration: underline;
}

#pillmenu a#active_menu-nav {
	color: #fff;
	background: url(../images/active_arrow.gif) top center no-repeat;
}

#pillmenu a#active_menu-nav:hover {
	color: #fff;
}

#leftcolumn {
	margin: 0;
	text-align:left;
	width: 221px;
	float:left;
	background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;

}


div#maincolumnfull {
	padding:2px 10px;




	float:left;
	width: 760px;

}









div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}

div.nopad {
	padding: 0;
	text-align:left;
}

td.middle_pad {
	width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #8cb6cf;
	text-align: left;
	width: 100%;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#71a7c8;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}


/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;

}

a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f6;
}

.ol-background {
	background-color: #666;
}

.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

.clr {
	clear: both;
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

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

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


tr.sectiontableentry1 {
	background:#f3f3f3;
}
tr.sectiontableentry2 {
	background:#fefefe;
}

/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight {
	background-color: #fffebb;
}


/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable {
  margin-bottom: 25px;
}

div.module_menu, div.module {
	margin: 0 0 0 2px;
	padding: 0;
	margin-bottom: 15px;
}


div.module_menu div div div div ,div.module div div div div {
	background: none;
	padding: 0;
}

div.module_menu div, div.module div {
	
}

div.module_menu div div, div.module div div {
	padding:0 0 10px 0;
	
}

div.module_menu div div div, div.module div div div {
	padding: 0px;
	width: auto;	
}

div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
	font-weight: normal;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	line-height:24px;
	
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
	height:36px;
	color:#fff;
	font-weight: bold;
	font-family: Tahoma, Helvetica,Arial,sans-serif;
	font-size: 12px;
	line-height:26px;
	margin: -2px 0 0 ;
	position:absolude;
	padding:0px 0 2px 22px;
	text-align: left;
	width:198px;
	background:transparent url(../images/h3_bg.gif) top left no-repeat;
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
	margin:0 0 20px 0;
	padding: 0px;
	text-align:left;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0px 0 0 10px;
	list-style:none;
	margin: 0px 0;
	width:194px;	
}


#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #c3b586;
	padding:2px 0px 0 12px;
	height:20px;
	text-decoration:none;
	text-align:left;
	color:#666666;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	color:#0d789c;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #0d789c;
	padding:2px 0px 0 12px;
	text-decoration:none;
	color:#0d789c;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
	
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
	background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
	background: transparent url(../images/current_link.jpg) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	s/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}


#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
	width: 69px;
        vertical-align:bottom;
        background-color: #ffffff;
	margin: 15px 0 10px 0;
}

form#form-login fieldset {
	margin:0px 20px 0 20px;
	padding:20px 0 0 0;
	border:none;
	text-align:left;
}
form#form-login ul { 
	text-align:left;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;	
}
form#form-login ul li{ 
	text-align:left;
	margin:0;
	padding:0 0 0 20px;
}

#leftcolumn div.module h3 {
	top:-500px;
	left:-500px;
	padding-left:0;
	position:absolute;
}



/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }






div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }












/* Parameter Table */

table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 0 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}

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

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

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

/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



/* ****************************************************************************** */
/* blue */
input,button {
	background:transparent;
        vertical-align:bottom;
}

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #666666;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #666666;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

Site: project-jericho.com

An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div.

If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work.

The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to.

Code:

/* content */

#main {
       color: #333;
       margin: auto;
       padding: 0px;
       text-align: left;
       width: 680px;
       background-image: url('img/bgx2.jpg');
       background-repeat: repeat-y;
}


#content{
	width: 440px;
	float: left;
	padding: 10px 10px 20px 10px;
}
* html #content{
	padding-top:20px;
}


#content .post 
{
	margin:0 0 3em 0;
}
#content .cat 
{
	margin:0;
	padding:0;
	color:#999;
}
#content .post-info 
{
	color:#777;
	text-align:right;
	
}
#content .post-info em
{
	font-style:normal;
	float:left;
	margin:0 5px 0 0;	
}
em.user 
{
	padding-left:12px;
	background:url(img/user.png) no-repeat left center;
}
em.date 
{
	padding-left:15px;
	background:url(img/date.gif) no-repeat left center;
}
#main .post-comments 
{
	background:url(img/comments.gif) no-repeat left center;
	padding-left:12px;
}

All I need for this code to do is to tile vertically in both Firefox and Internet Explorer.

I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance.

-Josh

I'm trying to do alternating colors in a table using CSS and I'm having some trouble.

My header row works fine, but the normal rows don't pick up the color change.

here is my CSS:

Code:

table.metadata-table {
	empty-cells:show;
	border-width:1px;
	border-spacing:0px;
	border-style:solid;
	border-color:#A1A1A1;
	border-collapse:separate;
}
table.data-table td, th {
	text-align:center;
	border-width:1px;
	padding:3px;
	border-style:solid;
	border-color:#A1A1A1;
}
tr.data-header td, th{
	background-color:#788A51;
	color:#FFFFFF;
	font-size:9pt;
}
tr.data-row1 td {
	background-color:#FBF8E0;
	font-size:8pt;
}
tr.data-row2 td {
	background-color:DBD594;
	font-size:8pt;
}

I've also tried dropping the preceding element type(ie: .metadata-row1 instead of tr.metadata-row1) and using id's instead of classes(tr#metadata-row1) with no success.

Here is the html application:

html Code:
Original - html Code <table class="data-table"> <tr class="data-header"> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr class="data-row1"> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> <tr class="data-row2"> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> <tr class="data-row1"> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </table>

  
<table class="data-table">
  <tr class="data-header">
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr class="data-row1">
    <td>cell 1-1</td>
    <td>cell 1-2</td>
    <td>cell 1-3</td>
    <td>cell 1-4</td>
  </tr>
  <tr class="data-row2">
    <td>cell 2-1</td>
    <td>cell 2-2</td>
    <td>cell 2-3</td>
    <td>cell 2-4</td>
  </tr>
  <tr class="data-row1">
    <td>cell 3-1</td>
    <td>cell 3-2</td>
    <td>cell 3-3</td>
    <td>cell 3-4</td>
  </tr>
</table>

The table rows pick up the right font-size attributes, and the data-header row works right and all the cells pick up the right border attributes, but the regular rows aren't showing the background-color.

Any ideas?

Much thanks

I'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem.

I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers.

Example 1:
URL.

As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs.

Example 2:
URL.

Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content.

The effect I'm looking for is something like this: URL.

My CSS is here
URL.

First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too.

Thanks in advance for any help you can offer.