How do I change the header background image

Changing the header background image in Zen Cart

The default template and its derivatives use a background image in the header.

Zen Cart background Image

You can see this by going to Admin > Tools > Template Selection and switching to Classic Contemporary Green.

By default Zen Cart uses header_bg.jpg for the name of this image, but you can use you own filename for the background image.

Using an image editor, create a new background graphic and save it to includes/templates/YOURTEMPLATE/images/yourheaderimage.jpg.

Now open your stylesheet.css and find or add the following code.

#logoWrapper {
  width:760px;
  height:110px;
  background-image:url('../images/yourheaderimage.jpg');
  background-repeat:no-repeat;
}

Change the file name to that of your own header image, adjust the width and height to those of your header image, save the stylesheet and upload both files to your server.


Still have questions? No problem! Just head over to the Zen Cart support forum and ask there.
In your post, please include your Zen Cart and PHP versions, and a link to your site.


Last modified April 3, 2020 by Scott C Wilson (a117296).