Add a background image to the "mostly grey" template

I would like to add a background image to the header of the "mostly grey template". This would allow me design a header image but keep the home/logout/my account and search buttons in place.

This is a sample of what I'm trying to achieve:

http://www.thailandunique.com/images/shop.gif

Any help would be appreciated. Thanks.

You could try this:

Find in YOUR_TEMPLATE/CSS/stylesheet.css (around line 175):

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

Remove "#headerWrapper, " at the front of the statement.

Add a new statement just above:

#headerWrapper {
background-image: url(images/mybackgroundimage.gif);
height: 100px; (change this to your own height!)
width: 200px; (change this to your own width!)
margin: 0em;
padding: 0em;
}

It should work :)

Thanks Adam, I will try this tommorow and let you know how I get on.

:smile:

Ok I'm nearly there, the background image displays but not exactly how I want it. I would like the zencart title image and tag line in the middle removed, and I would like the background I have just placed to be under the cart home and login buttons in the top left. The image is actually 120px high but is being squashed by the top buttons.

Sample here https://www.thailandunique.com/store

Thanks for your help, Lee

The quick way to get this is to use your fav graphic program and change the header.jpg image to a gif and give it the nam logo.gif then replace the one at om/store/includes/templates/mostlygrey/images/logo.gif with the new one.

Also remove the entry to display the current image