Div Background Image will not display on some Wordpress blog pages

[hockey2112]

This is driving me insane. I am editing the CSS of a Wordpress blog template, and the background image of the content div will not display the background image on any page other than the home page.

http://www.example.com/ (works)
http://www.example.com/?p=26 (does not work)
http://www.example.com/?cat=5 (does not work)
http://www.example.com/?page_id=2 (does not work)

This issue affects FF and IE8, but the pages display correctly in IE7. Please keep in mind that there is still much to do re: fonts, spacing, and such in the CSS, so the page still looks a bit rough.

FYI, I tried using a height attribute in the "content" div style, but I couldn't get it to work out the way I wanted. If I put a pixel height, then blog pages of longer length will only have, for instance, a "1000px" background image (and any 500 pixel-tall blog page will be pushed down to 1000px total height).

My CSS:

/** General **/

#wrapper {
background:transparent url(images/footer.jpg) no-repeat scroll center bottom;
}

#welcomeheading {
/*
background:url(img/header.jpg) no-repeat bottom;
height:96px;
font-family:"Trebuchet MS","Lucida Grande",Lucida,Vernada,sans-serif;
font-size: 10pt;
color:#000000;
/*padding-top:10px;*/
/*padding:3px 200px 0 0;
/*text-align:center;*/
/*text-align:right;
*/
}

#welcomeheading {
background:url(img/header.gif) no-repeat left top;
/*height:85px;*/
height:75px;
font-family:"Trebuchet MS","Lucida Grande",Lucida,Vernada,sans-serif;
font-size: 20pt;
color:#000000;
/*padding-top:10px;*/
/*padding:15px 0 0 0;*/
padding:25px 0 0 0;
/*margin:15px 0 0 50px;*/
/*margin:15px 0 0 110px;*/
margin: auto;
/*text-align:center;*/
text-align:center;
width:964px;
}

#welcomeheading a{
color:#000000;
}

#welcomeheading a:hover{
color:#918C5C;
}

.description {
text-align: center;
font: normal 14px Verdana, Helvetica, Sans-serif;
color: #fff;
padding-bottom: 10px;
/*padding-top: 10px;*/
font-weight:bold;
}

a {
color: #000000; text-decoration:none;
}

img {
border:0;
}

a:visited {
color: #000000;
}

a:hover {
color: #948D61; text-decoration:none;
}

acronym, abbr {
border:0;
}

acronym, abbr, span.caps {
letter-spacing: .07em;
}

acronym, abbr {
cursor: help;
}

blockquote {
/*border-left: 5px dotted #006600;*/
margin-left: 1.5em;
padding-left: 5px;
}

body {
background: #868F73 url(img/bg_repeat.jpg) repeat-x scroll left top;
/*text-align: center;*/
color: #000000;
font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
background-color: #868F73;
}

h2 {
font-family: 'Arial','Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 0.2em;
}

h2 {
/*border-bottom: 2px dotted #006600;*/
font-family: 'Arial','Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 0.2em;
}

h2 a, h2 a:visited {
color:#000000;
}

h2 a:hover {
color:#948D61;
}

h2#comments {
font-size:0.8em;
border:none;
}

h2#postcomment {
font-size:1em;
border:none;
}

h3 {
/*border-bottom: 2px dotted #006600;*/
font-family: 'Arial','Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

.pagetitle {
font-size:1em;
}

.widgettitle {
color:#000000; font-weight:bold; font-size:0.8em;
}

ol#comments li p {
font-size: 100%;
}

p, li, .feedback {
font-family: 'Arial','Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

ul {
list-style-type:none;
padding:0; margin:0;
}

li {
padding-bottom:8px; margin:0;
}

/* classes used by the_meta() */

ul.post-meta {
list-style: none;
}

ul.post-meta span.post-meta-key {
font-weight: bold;
}

.feedback {
color: #ccc;
text-align: right;
clear: both;
}

.meta {
font-size: 1em; padding-top:10px; padding-bottom:10px;
}

.meta li, ul.post-meta li {
display: inline;
}

.meta ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

.meta, .meta a {
color: #808080;
font-weight: normal;
letter-spacing: 0;
}

.storytitle {
margin: 0; padding-top:10px;
font-size:13pt;
}

.storytitle a {
text-decoration: none;
font-size:13pt;

}

.storytitle a:hover {
text-decoration: none;
color:#948D61;
}

.post {
font-size:10pt;

}

.entry {
color:#000000;
padding:10px;
/*border-left:2px dotted #006600;
border-right:2px dotted #006600;
border-bottom:2px dotted #006600;*/
}

.navigation {
padding:10px;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

.children {
padding-left:10px;
}

input {
/*border:2px dotted #006600; margin-top:5px;*/
background: #ffffff; color:#000000;
}

input:hover {
color:#948D61;
}

form#searchform input#s {
background: #ffffff; color:#000000; border:1px inset #000000;
}

.clr {
clear:both;
}

/** Specific **/

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
color:#000000;
background: #ebebeb;
/*border: 3px dotted #006600;*/
padding: .2em;
}

#commentform textarea {
width: 90%;
}

#commentlist li ul {
border-left: 1px solid #ddd;
font-size: 110%;
list-style-type: none;
}

#header {
background:url(img/header.jpg) no-repeat bottom;
font-family:'Monotype Corsiva', Times, serif;
letter-spacing: 0.2em;
margin: 0;
height:180px; width:100%;
}

#header a {
color: #000000;
text-decoration: none;
/*border-bottom:7px dotted #ffffff;*/
}

#header a:hover {
/*border-bottom:7px dotted #006600;*/
}

#blogname {
position:absolute; top:30px; left:50px;
margin:0; padding:0; z-index:100;
}

#daypic {
position:absolute; top:0; right:0;
}

/** The top menu items**/

#topmenu {
width:100%;
height:1.6em;
/*border-bottom:10px dotted #006600;*/
}

#topmenu ul {
list-style-type:none;
padding-left:10px; margin:0;
}

#topmenu ul li{
font-family:'Arial','Lucida Grande', 'Lucida Sans Unicode', sans-serif;
color:#ffffff;font-size:0.8em; letter-spacing: 0.2em;
text-decoration:none;
display:block; float:left; padding-left:15px;
}

#topmenu ul li a{
color:#000000; text-decoration:none; font-weight:bold;
display:block; padding:0;
/*border-top:10px dotted #ffffff;*/
}

#topmenu ul li a:hover{
color:#948D61;
/*border-top:10px dotted #006600;*/
}

/** End Top menu **/

/** Sidebar 1 - sidebar_top **/

#sidebar_top {
width:980px;
margin:auto;
}

#sidebar_top li {
display:block; float:left; width:480px;
padding:0; margin:4px;
list-style-type:none;
text-align:left;
}

#sidebar_top ul li ul li {
display:block; width:320px; padding:5px;
}

/** End Sidebar 1 - sidebar_top **/

/** Sidebar 4 - sidebar_bottom **/

#sidebar_bottom {
width:980px;
margin:auto;
/*border-top:5px dotted #006600;*/
}

#sidebar_bottom li {
padding:0; margin:2px;
list-style-type:none;
text-align:center;
}

#sidebar_bottom ul li ul li {
display:block; padding:5px;
}

/** End Sidebar 4 - sidebar_bottom **/

#content {
width:964px;
margin:auto;
/*border-top:5px dotted #006600;*/
background:url(img/content_repeat.jpg) repeat-y;
}

#leftcolumn {
/*width:160px; float:left;*/
width:150px; float:left;
padding-top:10px;
padding-left: 10px;
color:#000000;
}

#leftcolumn h2 {
color:#000000; font-size:0.8em;
}

#middlecolumn{
/*width:550px;*/
width: 575px;
float:left;
}

#rightcolumn {
/*width:214px; float:left;*/
width:190px; float:left;
text-align:left;
padding-top:10px;
padding-left:10px;
color:#000000;
font-size:9pt;
}

#rightcolumn a:hover {
color: #ffffff;
}

#rightcolumn h2 {
color:#000000; font-size:11pt;
}

#footer {
/*border-top:10px dotted #006600;*/
text-align:right;
/*padding-right:10px;*/
width:964px;
margin:auto;
}

#copyright, copyright a {
color:#000000;
font-size:0.8em;
}

/** For Sitemap Template Page - width of columns is 140 pixels **/

.sitemapitem {
width:145px; float:left; padding:5px; /*border-left:2px dotted #006600;*/
color:#000000;
}

.sitemapitem h2 {
color:#000000; font-size:0.8em;
}

/** Wordpress Calendar **/

#wp-calendar {
empty-cells: show;
font-size: 14px;
margin: 0;
width: 90%;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block; color:#000000;
text-decoration: none;
}

#wp-calendar a:hover {
background: #948D61;
color: #000000;
}

#wp-calendar caption {
color: #999;
font-size: 16px;
text-align: left;
}

#wp-calendar td {
color: #000000;
font: normal 12px 'Arial','Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}

#wp-calendar td.pad:hover {
background: #948D61;
}

#wp-calendar td:hover, #wp-calendar #today {
background: #555555;
color: #ffffff;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

Let me know of any other info you may need to help with this issue. Thanks for any assistance!

[edited by: swa66 at 7:03 pm (utc) on Oct. 6, 2009]
[edit reason] Linking policy - please see ToS and Forum Charter; reduce the length of the code dump [/edit]

[swa66]

I'd start with validating my code. E.g. #welcomeheading very near the top clearly has issues with comments to just give you an example of a problem in the first few lines. Since you generate the html, it's probably best to capture it (view source in your browser) and paste it in a static file so you can remove stuff till it's down to a manageable amount of code.

If you have pages that work and do not work with the same CSS: there's probably some difference in the html: seek it, it'll point you directly to what's wrong.