Previously working CSS for custom backgrounds now not working

[toddatkins 1]

Wow, I can't believe how much I have struggled with this. I have 2 very simple customizations that I had working fine and now they won't work and I can't figure out why. Here is what was working:

#footer {background: url("http://batonrougecounseling.net/wp-content/themes/platformbase/images/bgtile.png") repeat-x !important;}
	
	.page-id-14 body {
	background: url('http://batonrougecounseling.net/wp-content/themes/platformpro/images/background-big.jpg') !important;
	background-repeat:repeat-x !important;
	background-position:left top !important;

I had originally had the code in Custom CSS but the #footer background would not take so I moved them both to base.css, and it was ok for a bit. I started changing some things in typography and then something went wrong and both custom backgrounds REFUSED to work after that. Typography also resized my layout to 900, which I fixed. But now it's as if the background css stuff will not work no matter where I put it and no matter what I do. I have tried every combination of: Disabling AJAX saving Make dynamic CSS inline Clearing my cache Reloading an older "settings" save for platform pro Restarting my browser Trying a different browser Checking the paths of the background images Using firebug to see if I could tell what's wrong Nothing works, and I am stuck and frustrated. Any help would be appreciated. How could previously working code in base.css all of a sudden stop working and stubbornly not work??? My site is http://batonrougecounseling.net/therapists/ The "Home" page is set to my existing live site until I can get this new site ready, but that link will get you on one of my pages. Thanks in advance.

[catrina 103]

After reverting back to the default settings for Typography, is it only the background CSS that is having issues or does any other custom code refuse to work?

[toddatkins 1]

@Catrina: I only have 3 entries in custom css, the two backgrounds as listed above, and this one: body #primary-nav a{color:#e1dddd;} body #primary-nav .current-menu-item a{color:#fad53e;font-weight:400;background-color:transparent;} #primary-nav .main-nav li a:hover {color:#ffffff;font-weight:400;background:transparent;} This primary-nav one *is* working, the two background ones are *not* working. Hoping to find an answer to this, soon! ;-) I am crippled unless I can get this to work.

[kastelic 6]

You've got some errors. You need to switch

.page-id-14 body {

to

body .page-id-14

You're trying to target a 'body' tag within an element with the class page-id-14. For the foooter try changing it to

body #footer

Also, do you have this in base.css or Custom Code -> Custom CSS?

[toddatkins 1]

@Jimmy: Thanks for the reply. I am using base.css, and tried what you suggested but it did not work. After 2 hours of trial and error and using firebug I finally found something that did work: .page-id-14 #page-canvas { background: url('images/background-big.jpg'); background-repeat:repeat-x; } Hope this helps someone.

[nudolio 1]

Jimmy's worked for me without the space he has between body and . so you want:

 body.page-id-xx