Background image AND solid color in header
 

OK, this is driving me nuts. I can't believe it's this hard to do, and such an obvious solution isn't (seemingly) more readily available... I've GOT to be missing something really obvious, but I've tried so much for so long I'm at my wits end.

I'm trying to put a background color in my header, behind an image.

A search of the forums only yielded a suggestion to do a Google search on CSS background (seriously not helpful). I know how to do that. Tried it in a myriad of places (add HTML/CSS inserts, Configure Header Area, Logo Area: Styling, and none work).

Page in question: http://www.todddawsondesign.com/test/matia/
ATA 3.7.9
Trying to style header per Sudipto's instructions on http://letusbuzz.com/2011/03/full-wi...-in-atahualpa/ (the goal being to expand header AND footer, but keep body at fixed width).

Can someone help me see the obvious thing I'm missing?

1) that code was for an earlier version of Atahualpa when PHP was alowed in the theme options. Because of a WordPress restriction, that functionality had to be removed (complain to wordpress about it)

What code are you using to add the image and the color (exact code please) and where are you putting it?

I noticed on one of his two tutorials, in the responses, that the php code had been removed in later versions of WP. So I modified it per his example, including only the php code that was "allowed."

Here is all the code I put in, and where I've put it:

STYLE & EDIT HEADER AREA
CONFIGURE HEADER AREA
%image %page-center
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="coltwo" />
</colgroup>
<tbody><tr><td colspan="1"></td>

<!-- to make this work I added to ATO/ADD HTML/CSS INSERTS:
div.wrapbody{ width:980px !important; }-->

<!-- it also seems that using this setting makes the ATA Header styling settings ineffective, so it needs to be styled in the ADD HTML/CSS INSERTS-->


LOGO AREA: STYLING
background: #999966;

SHOW LOGO IMAGE?
header-960.jpg

LOGO IMAGE: STYLING
background: #999966;

I've tried infinite variations with the below, and styling either the table#layout div OR the a.divclick:link, etc showing results. But I can get only the background color OR the background image to show, never both together.

ATO/ADD HTML/CSS INSERTS
/*div#container { background-color: #999966; }*/
/*table#layout { background-image: url(http://www.todddawsondesign.com/test...ader-960.jpg); }*/
div#wrapper { background-color: #999966; background-image: url(http://www.todddawsondesign.com/test...header-960.jpg) top center no-repeat;}

/*a.divclick:link, a.divclick:visited, a.divclick:active, a.divclick:hover { background: url(http://www.todddawsondesign.com/test...header-960.jpg) top center no-repeat;}*/

Ok, first, that code adds a second ID of 'wrapper' - each ID has to have a unique ID
Second in the CSS after the color you have a semicolon which is the end of line character causing the rest to be ignored.

The semicolon didn't change anything, but you were right about the duplicate. In fact, there are duplicate wrapper, container, and layout divs.

So I'm trying to contact Sudipto at letusbuzz.com. I'll keep you posted.

Thanks for the extra pair of eyes!