Header logo ovelapping header bar, how do I do it??

I want the header image logo.gif to overlap the header bar as an design element to give the perception that the film is rolling out of the browser.

I have tried many different ways but I get odd result like the image moves up and I get the effect I want but then there a huge gap where the logo is vs. the columns, or the image and space is correct but the category images go to the top as well.

http://photographicbattery.com/

What are some ways that I could accomplish this.

Thanks in advanced
avel

Instead of having the logo as a foreground image in #logo, make it the background image for #headerWrapper. Add the blue bar to the top of the background image with the film "covering" it, and make #navMainWrapper have no background-image or background-color.

You will probably need to specify the height of #headerWrapper and change #logo or #logoWrapper to display: none;.

Okay I got it worked out however now I have another problem.. The header navigation bar in under the image and is not usable. How could I fix this.

I tried using the z-index attribute with it set to 1000 on #navMain so that its <div> would be on top of the logo image however it didnt work.

what next??

You didn't follow my suggestion. You have the logo as a foreground image covering the whole header navbar. Find or add these declarations in your stylesheet and edit them to look as shown:

#headerWrapper {
	margin: 0em;
	padding: 0em;
	background-image: url(../images/logo.gif);
	}

#logoWrapper{
	background-color: transparent;
	float: left;
	height: 147px;
	}

#logo {
	display: none;
	}

Separate #navMainWrapper into its own declaration and edit the background like this:

#navMainWrapper {
	margin: 0em;
	background-color: transparent;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffff00;
	height: 2em;
	}

gjh42:

You didn't follow my suggestion.

Its not that your suggestion wasnt good.. I really just had a hard time understanding your suggestion and how to do it.Mental block on my end.

I am going to try your suggestion right now.. I like that you actually showed me what you meant. It helps me..

Avel

I tried your suggestion and it didn't create the look I wanted. The image is a gif with a white transparency so that the film can cover the header bar to give it the effect of rolling out of the browser onto the banner image. Its does the job but not quite the effect I am going for..

Thank you though. If you have an idea on how to bring out my header navigation the is hiding behind my image please share it.

Thank you,

Avel

If you change the header background gif so that it includes the blue bar and white background "behind" the film, and make #navMainWrapper transparent, you will get exactly the look you want and have the navbar functional.

I was needing to do basically the same thing as my logo was too tall and it took up too much real estate at the top of the page. In my case moving the top links over the logo was just to help everything move up a little. It looks much better now.

I have a couple of notes to add however. I had to make some additional changes as this worked wonderfully in Firefox, but broke in IE6. In IE6 the page was shifted down by only the amount the nav links would normally push down to the logo. Then there was a space the height of the logo that was white and covered the bottom of the logo to the beginning of the rest of the page. To make it look the same in both browsers I basically moved the height attribute to the headerWrapper ID and totally eliminated the logoWrapper from both the style sheet and the tpl_header.php file. meaning that I have this in my stylesheet:

/********************************************************************/
/********************   Header nav over logo mod   ******************/
/********************************************************************/

#headerWrapper {
	margin: 0em;
	padding: 0em;
	background-image: url(../images/logo.gif);
	height: 199px;
	}
	
#navMainWrapper {
	margin: 0em;
	background-color: transparent;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffff00;
	height: 2em;
	}
	
/********************************************************************/
/******************   End Header nav over logo mod   ****************/
/********************************************************************/

and I completely deleted the logoWrapper div and everything in it. It worked like a charm.

I have a similar problem with a large logo, but I also have a repeating background so of course when I tried the above, the logo repeats across the header wrapper. I tried adding background-repeat: none; but this didn't work. Is there anyway to stop the repeat in the headerWrapper but keep the repeat in the body?

#headerWrapper {
text-align: right;
margin: .5em 1em 0em 0em;
color: #6C3306; /"bakers chocolate"/
background-image: url(../images/SweetZouZou2.jpg);
background-repeat: none;
height: 204px;
}

Sweet ZouZou:

I have a similar problem with a large logo, but I also have a repeating background so of course when I tried the above, the logo repeats across the header wrapper. I tried adding background-repeat: none; but this didn't work. Is there anyway to stop the repeat in the headerWrapper but keep the repeat in the body?

#headerWrapper {
text-align: right;
margin: .5em 1em 0em 0em;
color: #6C3306; /"bakers chocolate"/
background-image: url(../images/SweetZouZou2.jpg);
background-repeat: none;
height: 204px;
}

Hello what is your url? I would like to take a look at your site. I will be able to give you a better answer.

A background-repeat in #headerWrapper will have no effect on the body background. There must be something else going on here, or else you did not describe the situation accurately.

sorry batteryman

https://www.sweetzouzou.com

When I didn't get this modification to work, I added the code back to move the logo back out front. I am running out the door right now, but can make the changes again in a few hours.

gjh42, I want the background repeat in the body to show the fading background, but not in the header.

Thx! Sweet

I switched the code back and the header still repeats the back-ground logo. See below for the code from my stylesheet.

#headerWrapper {
text-align: right;
margin: .5em 1em 0em 0em;
color: #6C3306; /"bakers chocolate"/
background-image: url(../images/SweetZouZou2.jpg);
}

#logoWrapper {
background-color: transparent;
height: 179px;
float: left;
}

#logo {
display: none;
}

#navMainWrapper {
color: #6C3306; /"bakers chocolate"/
width: 100%;
height: 25px;
background-color: transparent;
}

body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 74.5%; /text size (default 79.5%)/
margin:10px 0; /default 30px/
background:#fff; /color of page background (white default fff)/
background-color: transparent;
background-image: url('../images/fading_background_12.png');
background-position:top;
background-repeat:repeat-x;
}

OK, your body background is repeating correctly (repeat-x).

Your headerWrapper background (the logo) is repeating because that is the default behavior. You do need to specify background-repeat: no-repeat; under #headerWrapper{}.

Do that and let's see how it behaves. Is the location of the logo the problem? The bg start position can also be specified.

Thx very much. I tried early to no repeat the logo but had the code in the wrong place (in the logowrapper). Someday I'll figure this out on my own ;-).

The location is ok for now , but as long as here helping :smile: what is the bg start position?

Thx Sweet!

1 more thing, I just realized the "home link" associated with the logo is gone. I like this feature to click the logo and head back to the main page. How can I add this feature back into the background logo image??

Sweet

You can't have a link from a background image.

You can make #logo {} have a size and #logoWrapper {} have a location (with CSS margins), and put pixel_trans.gif in it so IE won't choke; then this transparent image will exist in the same position as the bg image and can be clickable.

Background positioning is done with something like

background-position: 23px 111px;

The first number is the distance of the left edge of the image from the left edge of the element, and the second is top of image from top of element. If you use negative lengths, the start point will move outside the element.

There are numerous refinements of this, but this will get you started.

Excellent! Thanks for the help!

Sweet

I tried the below and no joy.

#logo {
display: none;
height: 295px;
width: 81px;
}

#logoWrapper {
display: pixel_trans.gif;
background-color: transparent;
height: 160px;
float: left;
margin: .5em 1em 0em 0em;
}

You need to edit tpl_header.php to make the logo div call for pixel_trans.gif directly (instead of HEADER_LOGO_IMAGE or whatever exactly its constant name is).

Then you can use your stylesheet:```
#logo {
height: 295px;
width: 81px;
}

#logoWrapper {
float: left;
margin: 1em 0 0 5em; /adjust 1em (top) & 5em (left) to position logo/
}

Backgrounds are transparent by default.