How do I change the header background image

My template uses a background image and I don’t want it

Note: This content does not apply to the responsive_classic template, and may not apply to your template.

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? Use the Search box in the upper right, or try the full list of FAQs. If you can't find it there, head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified October 18, 2020 by Scott C Wilson (04e2a391).