replacing images with my own

[cyberbaffled]

In the Administration utility it's possible to turn on or off the display of boxes for "manufacturing", "categories", etc. Is it possible to turn on a box, keep the text and their links, but replace the underlying image? What I'd like to accomplish is to superimpose the entire home page of the cart over one image. If necessary I would if possible partition the image and use those partitions as the background images of each pre-existing box of the aforementioned varieties. I would then use my user access to CSS to position the box images in a manner that recreates the original image in its entirety. Is this possible?

[dbltoe]

Create your background image and then remove the relative background-color css calls from the stylesheet. Instant transparent boxes.

[gjh42]

That's right. ^^
Using individual element background images to recreate a whole picture is a holdover from antiquated table layout where an image would be sliced & diced, them pasted into table cells. A single background image with transparent elements over it will work much more smoothly and require no fiddly maintenance. Backgrounds that relate specifically to one box should be set by CSS as a background for that box so they stay with it when its position shifts due to dynamic content.

[cyberbaffled]

Hi again blackbelt. First come, first serve, so please see my reply to dbltoe. Of course, it's also an appropriate reply to your much appreciated comment.

[dbltoe]

Bitten by the spell checker. Should have been "related". IOW, start with wrapper colors as they are related to the entire area.

[cyberbaffled]

Apparently I don't know what a "relative" background-color is. I've replaced every background-color in the primary CSS file with "background-image: URL(images/myfile.jpg); W3 wasn't clear on the syntax so I've also tried placing within parentheses 'images/myfile.jpg'. No dice. One thing that did happen though was that the entire home page with the big Zen Cart logo in the upper left hand corner lost all graphical content except what was in the boxes. So I seem to be headed in the right direction.

Thanks for your prompt response.

[cyberbaffled]

RESOLUTION: The correct syntax is background-image: url('imagename.jpg'); AND VERY IMPORTANT: the image must be in the same folder as stylesheet.css.

[gjh42]

In standard Zen Cart functionality: The correct syntax is background-image: url(../imagename.jpg); (quotes in the url are optional) AND VERY IMPORTANT: the image must be in the /includes/templates/your_template/images/ folder, not the /css/ folder with stylesheet.css.