Getting a background image into NavMain or NavMainWrapper?

[BabaGee]

v 1.3.9.h

Have installed the tpl_header.php mod that puts the navigation header UNDER the main header.

All I want to do it to place a background image into the navigational header ... but nothing I'm doing seems to do the trick. (I've done this before in V1.2.6 .. so go figure????)

I've tried adding

background-image:url(..custom/images/header_nav.jpg);

to both the navMain CSS id and to the navMainWrapper id. No go!

Then I tried putting inline CSS directly within both (not at the same time) of the <div> tags that contain these two ids in the tpl-header.php file in my custom / common folder.

Nothing.

This should be so simple ...

I have been able to get the image in place, but NOT as background image , so all the navigation links rest over the top of it!

HELP!

Thank-you!

Here's a link to my ailing site: htpp://www.pregnantearth.com/NEW_ART_STORE
If you want to see the kind of thing I'm aiming for, see the current site (v1.2.6) http://www.pregnantearth.com
.. as you'll see I'm going to want to do the same thing for my LHS column ... put a background image in there, too.

[stevesh]

background-image:url(..custom/images/header_nav.jpg);

Don't know if that's a typo, but it should be:

background-image:url(../custom/images/header_nav.jpg);

[kobra]

I've tried adding

background-image:url(..custom/images/header_nav.jpg);

Small syntax error
Should be

background-image:url(../custom/images/header_nav.jpg);

And I think that it should be applied to #navMainWrapper

[BabaGee]

Thank-you so much .. it was that syntax and I also had to leave the custom part out and just go with : .. /images/header_nav.jpg. ?? for some reason!

I knew it had to be something ridiculously simple!

Gratitude,
AnRa

[kobra]

go with : .. /images/header_nav.jpg. ?? for some reason!

If the image is in your /images dir then that is correct but if in your /custom/images dir then it should have been found with what was posted

[BabaGee]

Yeah 'should' ... but it only works when coded as ... /images/header_nav.jpg - probably because the custom images folder is the same directory level as the common folder where the call for this image resides: in the tpl_header.php file.

So, onto another issue now : any ideas why I'm getting the hairline gap between my header and Nav. header image below it?

http://pregnantearth.com/NEW_ART_STORE/

I've checked and checked again : there's no gaps in the final loaded image files.
Have checked all the CSS id's in the tpl_header.php, to make sure there isn't any unforseen padding going on.

I tried moving the header_nav.jpg up with a padding-top:-1px; addition to CSS for navMainWrapper -but that didn't do a darned thing, either!

Ah ha! Turns out this is only rendering this way in the Firefox browser ... not in Safari ... haven't tested on IE yet ... (hubby has the PC out of State)


Any suggestions / experience with this wee buggy FireFox thing?


Thanks in advance!
AnRa

[gjh42]

The (../images/yourimage.gif) looks for a file in the current template's /images/ folder. This is the standard format for Zen Cart template background images.

Padding can only be positive, unlike margins which can be positive or negative.

[gjh42]

I don't see any gaps in the header area, using Firefox 3.6.

[BabaGee]

OK thanks Black Belt. Got it on the negatives!

Am using FireFox 3.6.16 .. will just ignore this gap for now, I guess.

[gjh42]

I have the same version, 3.6.16, and just checked again to find no gaps in the page display. What happens if you clear your browser cache and look at it from scratch? Does anybody else see this gap?