New headerbg.gif image not displaying

I am using the Arch Shoppe template and cannot get a new headerbg.gif to display.

I have created a new headerbg.gif that is 720 X 110 pixels. I renamed the original file and then uploaded this new image to templates/arch_shoppe/images directory.

I then confirmed the following in the css:

#logoWrapper{
background-image:urlSIZE=2;[/SIZE]
background-repeat:no-repeat;
background-color:#D6E0DD;
width:720px;
height:110px;
margin:0em;
padding:0em;
}

This css file is located in *templates/arch_shoppe/css *directory.

In Admin, I have selected the arch_shoppe template and this is what is displaying on the store. However, the image is not displaying anywhere on the page.

What else must be set in order for the image to display?

What's the link please?

The site is cjpicnicbaskets.com

Please double check where the images are. Firefox is showing the following as missing:

includes/templates/arch_shoppe/images/tile_back.jpg
includes/templates/arch_shoppe/images/headerbg.gif
includes/templates/arch_shoppe/images/

I don't know what it's looking for on that last one. There's no image name.

Thanks for your pointers. I was able to copy the tile_back.jpg image to the templates/arch_shoppe/images directory. That seemed to do the trick.

What I am noticing now is that gif images do not display well. I have a jpg image that is 102KB that I would like to use. I have tried it on IE7 and it displays well. http://cjpicnicbaskets.com/includes/templates/arch_shoppe/images/header_meadow.jpg

I have the following code in my css:

#logoWrapper{
background-image:urlSIZE=2;[/SIZE]
background-repeat:no-repeat;
/background-color: #D6E0DD;/
width:800px;
height:120px;
margin:0em;
padding:0em;
}

However, the jpg image does not display in the header. The previous headerbg.gif continues to display. I can even copy a new headerbg.gif image and see it change.

I have confirmed that the css in templates/arch_shoppe/css does have the code above.

Is there a hesitation between uploading a new css and it taking effect?

Is there a size limitation that is preventing my 102KB jpg image from displaying?

Either delete stylesheet_old.css from your site or rename it with something other than .css as the extension (like stylesheet_old_css.txt). It's interfering with the changes you're making in your stylesheet. The settings in the last stylesheet loaded will always overrule any previous formatting.

WOW! I am learning so much about css.

Thank you for your help.

Zen by default loads everything in the css directory (um, with .css on the end) in alphabetical order, so change the extension to .backup or just keep the backups local. I usually just change the .css with the date, so today would be stylesheet.041007.

personal preference, but I also add comments at the top of the page as to what I changed in addition to a little note where the change was made, then you can look at the tops of the files and see right away why you make a newer version.

I'm new and all, but my file name for that is header_bg.jpg, not headerbg.jpg

Not sure if it applies to your situation or not.

css stands for Cascading Style Sheets which means all files in the same directgory with the .css extension will be loaded and if more than one stylesheet contains the same directive, the last one loaded will be the one used. This is NOT something peculiar to Zen Cart. It's the way stylesheets work. If you are coding your own stylesheets and html, you can control the order. If you're dynamically building pages (like ZC is), they're loaded in order based on the names (alphabetical, numerical). Bottom line is, if you're not using the stylesheet, either delete it or give it an extension other than .css

Check out http://www.w3schools.com/ for some good information about stylesheets, html and tons of other subjects.

I made the extension changes as directed and this immediately fixed the problem.

I can see me using this for seasonal changes to our sites. Having different css files for different color schemes to be used throughout the year.

The same for header.php. Create a set of css and header.php files for different seasons, specials or promotions. By switching out the extensions I could quickly and easily change the look and feel of the site.

Once a person grasps the power of css a whole new world of site design opens up.

stylesheet.md and header.md could be examples of css and header files for Mother's Day. stylesheet.fd and header.fd could be for Father's Day and so on. I would only need to change the extensions of the files to activate/deactivate them as the seasons come and go.

You've been Zenned! :clap:

Another alternative would be to create different templates for different seasons/holidays. You could have /mothersday/ and /fathersday/ templates and change it in the admin. If you use the mod that keeps your sidebox settings, all you'd have to do is change the template in the admin and the look of the site would change.