Background Image for header help

[nomadrw]

Here is what I want to do and I need a little help.
I want to have a background image in my header (Header Main Bar).
I then want to place my company logo on top of the header.
Next I want to place some text on top of that, which I think I can use the Sales Message Goes Here text.

I have a copy of the CSS and placed it in my custom folder
includes/templates/custom/css/stylesheet.css

I would like this to be the same thought all the pages (ez_pages, define pages....)


Any help or directions would be great

thanks
nomad

[gjh42]

Put the background image in #headerWrapper

#headerWrapper {
    background-image: url(../images/yourbg.gif);
    }

Load in /your_template/images/.

Load your logo file in the same place; naming it logo.gif will eliminate any other file editing for this (except for defining the height & width in header.php). You can position #logoWrapper with your stylesheet.

Put your text in the tagline define, and then position #tagline:

#tagline {
	color:#000000; /*adjust to taste*/
	font-size: 2em; /*adjust to taste*/
	text-align : center;
	vertical-align: middle;
	position: absolute;
	left: 123px; /*adjust to taste*/
	top: 42px; /*adjust to taste*/
	}

The position: absolute; allows the tagline to go anywhere on the page, even on top of other elements. Make #headerWrapper position: relative; so it will serve as a reference container for the tagline.

[nomadrw]

Thanks again Glenn

To make sure I do this in the css.
where it says #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, and so on....


I would do this
#headerWrapper {
background-image: url(../images/yourbg.gif);
}

#contentMainWrapper, logoWrapper, #cartBoxListWrapper, and so on....


is that right!!!!

[nomadrw]

This is what I did, I have not upload it to the site yet. Want to make sure its right before I do upload it.

#headerWrapper {
background-image: url(../images/head_image_bk.gif);
position: relative;
}

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
position: absolute;
left: 123px; /*adjust to taste*/
top: 42px; /*adjust to taste*/
}


and this is the path where I have my images at
/includes/templates/costum/images/
can some please tell me if this is correct.

thanks
nomad

[gjh42]

Looks good. You'll have to adjust top and left to get the tagline positioned exactly right, but that's just a matter of experimentation.

[nomadrw]

thanks glenn