Backround image?

[zerocool9455]

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!

[haredo]

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/i...hp?article=257

[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;
}


???

[zerocool9455]

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/i...hp?article=257

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

[haredo]

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

[zerocool9455]

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?)

[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.

[enigma666666]

?

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

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 */
}

[enigma666666]

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 */
}

[zerocool9455]

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?