[SOLVED] Displaced background of menu appears after changing header height
 

Hello,

If I change the header in any way that changes its height, there remains a displaced background of the menus.
In this instance, I have only set "Logo Area: Styling" to "height: 100px;" (instead of 130). And here is what happens:

http://tcpc.ch/nouveau/

Would someone be able to tell me how to correct this?
Thank you.
(Atahualpa 3.5.3)

To fix that you would have to edit the background image (The gray bars). If your browser allows right click on the background and choose view background image. Here is a link to the image on your site so you can see what it looks like. It is repeated horizontally to make the gray bars.

Note that I don't want to change the background image of the menus. I want the menus as they are by default, with the gray bars. What I seem to understand now is that the displaced copy (repeated horizontally) of this background image is used to extend the bars of the menu on the left and right of the menu. I would have hoped that they would automatically move along when the menus move? (i.e. when the menus are vertically displaced by some change in the header styling)

Is it the case that I should wait to know the final position of my menus, and then modify manually the source code of the theme to position these extension bars at the same height of the menu in order to correct the offset which is presently visible? It seems strange that this is not taken care of automatically. If I really need to do that manually, could someone possibly indicate where this change should be done?

Thanks.

Ah, I just realized that the background image includes a white or transparent part that indeeds determines the height of the visible part. So indeed it seems that I will have to modify this image manually to match the height of the menus when the height of the menus is known. That seems a bit cumbersome, doesn't it?

That's the way background images work for a website. If you are set up right it is not really that cumbersome. I usually tweak the image and upload via FTP and look at the site. If it isn't quite right I tweak it some more and upload again overwriting what is there and look again. Sometimes I use an on screen ruler to determine how many pixels the image will need to be changed by.

The other option (I have not tested though) might be to put an image that is just the gray bars and then use CSS to position where you need it but I like having the image at top left.

Here is another thing you can try that may work but I would test in several browsers. In ATO>Body, Text, & Links. At the end of the background image line where it says left top replace top with -30px and see what happens.

I tried "left -30px" and it works under Firefox 3.6.12 and Explorer 8. I guess it is not the safest CSS instruction, and I will probably modify the background image at the end. Maybe using a background image without blank pixels and positioning it with CSS would be safe enough to make it to the distribution version? I don't know. In any case, thank you Larry, you solved my problem!