100% Background issue HELP!!!!


I am currently hacking apart one of the skins for cs-cart. What I am trying to do is have a 100% high and wide background image to the cart. This is fine and I have sort of got it working… the issue I am having is that the background comes in a layer showing some of the sstore content and hiding some of the store content.

What I need to know is the hirachy of the template files, like top.tpl loads into main.tpl that loads into indix.tpl that loads in to …??? Then hopefully I will be able to add the 100% CSS image to that file and get the background image on the very bottom level of the browser.

If anyone can help me with this or knows and alternative to get a 100% streching background, your help would be

very much appreciated.

Thank you.

Do you use Firebug with Firefox? It won’t help you with the hierarchy but it will help you with what parts of the css you need to change, and you can see what effect the changes will make using Firebug before you actually make the changes.

Yeah, I use Firebug, however it isn’t helpingme much as I cant tell which file to adjust to add the background image,

Basically the BG image is placed between the cart search box and below the cart items… which inturn hides the search box. I have tried adding the background image to the main.tpl, index.tpl and top.tpl. no matter what I do it hides the searchbox and other items… Which is making me crazy.

Usually this would be relatively simple, except I want the background image scaling at 100% to always file the browser… So I am using a css to stretch the image and then a content div to scroll the cart. The only problem is… which file do I place the background image in, so that it doesn’t hide the search box??? you can see an example here… [url]http://dogstonedesigns.co.uk/index.php?store_access_key=flash[/url] this is based on the consultant template… it should show the header pieces , search box, footer etc…

If anyone can help me that would be great - thank you

I can’t follow what you said.

Gimme a photoshop of who, what, when, where how. :slight_smile:

It’s a long shot, but Safari’s “Web Inspector” might help you decipher. I think it examines more than just CSS builds, but I haven’t played with it enough to know for sure.

Please post back if youfind an answer, I’d love to know myself for future redesigns.

By the way, that’s a beautiful layout you have going on there. Ought to look great when you’re done!


You asked for a solution if I managed to solve it… so here goes.

This is based on hacking the consultant included template…

first add the following two tines below in index.tpl in the customer directory of the consultant template

next add the following to styles.css in customer directory of the consultant template

img#bg {

#content {

That will give you a 100% scaling background to the cart behind everything.

The solution to this is z-index set to -1... I didn't think you could do this... but it works, so I am happy wit hthat.

I hope that helps anyone wanting 100%