Extending the header image into the page menu bar

G'day all

I searched about for a means to flow my header image over an unsed section of my menu bar just a a means of dare I say it "cool". Or something.

I started with the old image slicing trick to create both my header and menubar images. Both are 1280 wide. The header started at 180 high, but then I sliced off the bottom 30 to create the menu bar image as my bar is sized at 30 high. Thus I have two images header at 1280x150 and menubar at 1280x30. All sizes in pixels of course.

Dropping the header image in was not tough as you all know. Just upload to the images>header area and leave a single image there. I placed the menubar image in the atahualpa>images directory for easy locating.

But now what? I toyed and pushed and pulled and finally arrived at the following that I entered into the CSS inserts area:

div#menu1 {border:0 !important;}

ul.rMenu {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/menubar.jpg') !important;}

The first item removes the menubar border entirely. The second sets the menu bar background using my sliced image.

See my test site here: http://www.n30pharma.com/test

Not exactly perfect, but pretty close.

Lovely, but what if I want to use a different image on interior pages. I search around again, found a plugin, but decided against it. My aim was to have an interior image for each submenu so I made note of each page-id (e.g. #13 for the empty About page).

Then I again created another sliced image pair and added a touch more CSS as follows:

body.parent-pageid-13 div#imagecontainer {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/header2.jpg') !important;}

[indent]body.parent-pageid-13 ul.rMenu {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/menubar2.jpg') !important;}


Note that I have to use !important.

All this gives every impression of working albeit we might argue that it is a maintenance nightmare. The site is not deep so perhaps more of a bad dream than a nightmare, eh?

Now a question to the group - is the CSS rational? Is there a very much better way of accomplishing this lovely trick? I look forward to the discussion. My thanks for listening.

Patrick

(WP: 3.4.1 A: 3.7.7.)