Different header images for different pages
 

I have one page background image for my home page and one for all other pages. Following these instructions, http://forum.bytesforall.com/showthr...der+image+post
I put the bg image for *all other pages* into ATO ->Style and configure layout ->Layout container style as follows:
padding: 0;
background: url(/wp-content/themes/atahualpa/images/pagetopcontent.jpg) no-repeat center top;
(Header area height is set to 505, which is the size of the image. )
Then I added overrides to HTML/CSS as follows:
body.page-id-24 div#container {
padding: 0;
background-image: url(/wp-content/themes/atahualpa/images/pagetophome.jpg) no-repeat center top !important;
}
The image that shows up on the home page is the one set in config layout style>layout container, not the override one. (The home page has a header widget to hold an image gallery) The other pages just get cut off before the entire 505 pixel bg image is displayed.
What did I do wrong?
The attachment is the image that should display for the home page. The content page has the same radial background, but doesn't have the bottom "Imagine Formulate Appreciate" band at the bottom. The radial just continues for 505 pixels.

Sorry, I forgot, The site is jkstest.info

ummm...better go read the directions again...

Ok, I found the dopey error:o
I had the div#container instead of div#imagecontainer. But you already knew that.

Still not seeing the proper header image on the home page or the entire 505pixel image on any other content page.
I even changed the path name in the CSS override code (and yes, did load the image to that folder)
background-image: url(http://jkstest.info/wordpress/wp-con...agetophome.jpg) no-repeat center top !important; even though I couldn't imagine the location of the image would matter. ...and it didn't. I'd prefer to use the
background-image: url(/wp-content/themes/atahualpa/images/pagetopcontent.jpg) no-repeat center top;
notation so that I have one less thing to change when I move the site to the production domain name.
What's wrong?

This is all done in the CSS Inserts area

Are you saying the problem is that I can't set up a "default" header image for 99% of the page in the
ATO ->Style and configure layout ->Layout container style and then just override the home page in the insert CSS? I have to "override" each page in the CSS inserts?

when I enter
into the browser address I get a 'Not Found'. this could be caused by the image name being wrong or the file permission might be incorrect.

URRGH its the directory that's wrong. it should be jkstest.info/wp-content/uploads/pagetophome.jpg
In my zeal to go back and follow the directions exactly, I followed the directions exactly, and let my brain disengage.

Making that correction didn't seem to matter anyway....Does the location of the folder really matter, as long as I specify the path properly...In other words,
Is it necessary to put the override image in the uploads folder Per the above path) or should it work if I used
/wp-content/themes/atahualpa/images/pagetophome.jpg (assuming of course that pagetophome.jpg was in that images folder?

(don't you just hate it when you do that :p )

It shouldn't matter, but I'd suggest using 'wp-contents/images_atahualpa' then you won't have to change it during an update or have to move the images

Good grief, I need to call it a day.....now the header that is supposed to only show up on the HOME page is showing up on EVERY PAGE....Can it be the widget image gallery on the page that is doing something weird?

you only have an override for page id 24

That's what I think, only override page id 24. But all the pages show the pagetophome.jpg image, not the pagetopcontent.jpg image. I even switched the code in the ATO>Style and configure layout>
layout container style to point to the same /wp-content/uploads directory as the override does. Of course, that makes no sense. But I do appreciate the point you made about flexibility by using the uploads directory.

I think I see what is happening.

You have set the pagetocontent.jpg as the background for the div#container (ATO->Style & configure LAYOUT->Layout Container Style

However, the CSS you are putting in to do an override is using 'body.page-id-24 div#imagecontainer'

The image container is for the header IMAGE (when you use %image in the header configuration). Try changing 'body.page-id-24 div#imagecontainer' to 'body.page-id-24 div#container'

We have come full circle....that's where I started yesterday am, when you suggested I read the directions again. The difference between what I had and what was in the directions were
div#container vs div#imagecontainer and folder where both the override and the regular images
were stored, which we both agree that the location makes no difference as long as the path is properly specified. Dare I go back and re-live yesterday?

The location of the file on the server makes no difference, but the place you put that image in the HTML does.

you are dealing with two different image locations, the 'container' and the 'image container'.

The container is the area that contains everything, the header, sidebars, middle and footer.
The image container is a part of the header area. It only shows up when you use the %image option.

So since you haven't got the %image, no 'image container' is created in the page source so the CSS to override it is not used.

Since you apply the main image to the 'container' you want the CSS selector to reference that HTML area to override it.

I had this wild fantasy that changing it back to container would fix it. No dice. In my travels around the bfa forum yesterday, I decided that firebug would be a good thing for me to install and learn to use. So, I'm no expert, but in my limited knowledge, I view the page with firebug and I can clearly see pagetopcontent.jpg as being invoked, and no sign of pagetophome.jpg anyplace....yet the image that renders everyplace is pagetophome.jpg!

Is is possible that the image gallery widget is the culprit somehow? Its the only other variable in the mix!

please go to ATO->EXPORT/IMPORT settings and export your settings, then attach them to a reply

Thanks - here it is.

Your syntax is incorrect
lookup the syntax for 'background-image'