Backround image?

Hey Haredo if your still around,.. Or anyone that knows

Now I'm looking to change the background to an image. I am assuming that it's in the CSS where I just changed the main page width? If so, or not... how would that be done?

Thank you again!

Ze,
On the tab on the top of this page called Tutorials/FAQ

1. search for:
2. background image
3. https://www.zen-cart.com/tutorials/index.php?article=257

Do I add this?

background-image: url(../images/tile_back.gif);

To this?

/wrappers - page or section containers/
#mainWrapper {
background-color: #383E44;
text-align: left;
width: 850px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

???

haredo:

Ze,
On the tab on the top of this page called Tutorials/FAQ

2. search for:

3. background image

4. https://www.zen-cart.com/tutorials/index.php?article=257

That's kewl,.. is this just for boxes or the main page background?

zerocool9455:

Do I add this?

background-image: url(../images/tile_back.gif);

To this?

/wrappers - page or section containers/
#mainWrapper {
background-color: #383E44;
text-align: left;
width: 850px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

???

Z,
Yes, make sure you upload this new image to:

1. includes/ templates/ darkness/ images
2. It is the principle behind any background image to the site weather sidesboxes, headers, mainWrapper or footers

You have been very helpful tonight! Thank you!

What's The default screen size?

and should I remove the background-color? (or does it not make a difference?)

?

Wouldn't that just change the image of the whole template box and not the background image of the whole page? I'm looking change the whole background page image.

zerocool9455:

?

Wouldn't that just change the image of the whole template box and not the background image of the whole page? I'm looking change the whole background page image.
I am still new to Zencart, so if my suggestions are wrong,my apologies in advance:D

If you want to add a background image behind the main content box aka page,
then add this to Your Custom template css stylesheet:

#navSuppWrapper{ background:url('../images/your image.jpg'); width: 100% or whatever you want;}

If you mean that you want the whole page to display the image and you don't want a "page" to be displayed on top of the image,then you can make the "page" transparent by adjusting the following in your Custom template css stylesheet:

#mainWrapper{ background:here you can try to use the word transparent or you can just add an additional#infront of your color code eg ##000000 and it will render it transparent, I found this out by accident when modifying Zen template stylesheet..hehe..but it could also maybe just have been a fluke}

Or else you can use the following standard css codes for transparency:

selector {
filter: alpha(opacity=50); /* internet explorer /
-khtml-opacity: 0.5; / khtml, old safari /
-moz-opacity: 0.5; / mozilla, netscape /
opacity: 0.5; / fx, safari, opera */
}

:oops:
Made a mistake in the post above but couldn't edit post as apparently you have to do it within 7minutes! :(

Please ignore the above. Here is the post again with my edits to it:

If you want to add a background image behind the main content box aka page,
then add this to Your Custom template css stylesheet:

body{ margin: 0; padding: 0; text-align: center; font-family: tahoma, verdana, arial, helvetica, sans-serif; font-size: 12px; color: #000000;background: #E0E0E0 url('../images/your image.jpg'); }

If you mean that you want the whole page to display the image and you don't want a "page" to be displayed on top of the image,then you can make the "page" transparent by adjusting the following in your Custom template css stylesheet:

#mainWrapper{ background:here you can try to use the word transparent}

Or else you can use the following standard css codes for transparency:

selector {
filter: alpha(opacity=50); /* internet explorer /
-khtml-opacity: 0.5; / khtml, old safari /
-moz-opacity: 0.5; / mozilla, netscape /
opacity: 0.5; / fx, safari, opera */
}

Hey enigma,...

Thanks for the help,.. I just wanted a nice background image instead of a basic blank one is all. So when the PHP template is placed on top it looks more interesting. I have another question,.. if I add this...

body{ margin: 0; padding: 0; text-align: center; font-family: tahoma, verdana, arial, helvetica, sans-serif; font-size: 12px; color: #000000;background: #E0E0E0 url('../images/your image.jpg'); }

Then how big is the image supposed to be? 975px or something? Is there anyway to make it like 100% in stead of a number? I would like to insert it as close to most default screen size used today with a 100% included to make it fit the sides perfectly,.. how is that done?

Update,.. finally loaded the CSS style sheet into Dream Weaver... But as I stated above how do I do the 100% of the page with the image? would that be taken car of from the Margin: 0? just looking for the right answer before I pound my head into the wall, lol.

zerocool9455:

Update,.. finally loaded the CSS style sheet into Dream Weaver... But as I stated above how do I do the 100% of the page with the image? would that be taken car of from the Margin: 0? just looking for the right answer before I pound my head into the wall, lol.

Okay I am not an expert and still new to Zencart customization, but my image that I used in the background is 571x428. I did not resize it at all and just added it. Because I stated that the width must be 100%, it automatically tiles/adjusts to fit any screen resolution without me doing anything:D I think the 0 margin does the trick,not to sure.
Here is the link to show you what I mean:
http://www.alrodeindustrial.co.za/zencart

You don't need to use dreamweaver to edit your css, wordpad will do. That is what I did. Also you should download the firefox webdeveloper toolbox addon,its free.
It makes thigs much easier.
Then you can edit css on the "live" site on your browser to see what it will look like and the nice thing is that you can't mess the site up by doing this .Once you are happy with the edit, then just duplicate the changes inside the real stylesheet on your desktop and upload to your server:wink:

This 7 minute edit time is really starting to get on my nerves!:censored:

I Meant to say that even though I **did not **state 100% width, the image automatically tiles/adjusts to the width of any screen resolution.
If you think of it logically, if you look at any zencart shop, the back ground always fills the whole screen. Therefore it makes sense that your background image will always automatically be 100% width of any screen.
I have tested the site I linked above and the background images shows full width on all resolutions.

So I got into playing around with the CSS and I got the background image I want in it... This site is really starting to shape up,.. if you sit there long enough you can really customize the crap out of this thing. This is the first time I really played around with CSS, but I am liking it. I used to build sites from tables with photo shop,.. but CSS+DIV+PHP is the way to go.

Glad to hear that you got it to work the way you want it!:D