New headerbg.gif image not displaying

[CJ Internet Sales]

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:url(../images/headerbg.gif);
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?

[TripleMoons]

What's the link please?

[CJ Internet Sales]

The site is cjpicnicbaskets.com

[afo]

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.

[CJ Internet Sales]

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/...der_meadow.jpg

I have the following code in my css:

#logoWrapper{
background-image:url(../images/header_meadow.jpg);
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?

[afo]

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.

[CJ Internet Sales]

WOW! I am learning so much about css.

Thank you for your help.

[TMC_Sherpa]

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.

[canemasters]

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.

[afo]

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.