adding image border to the sides of homepage

[Verushka]

Can anybody advise on how to add an image to the sides of the whole website. Like a border but a side border that shows on both the right and left side of a website.
My website is www. a n n a c l a i r e s h o u s e.com. The spacing in the domain name is to ensure this doesn't end up in a search engine.
Thanks ahead of time.

[stevesh]

If the image is tileable, you can just add it as a background image to the body section of the stylesheet, and repeat it horizontally and vertically.

body {
background-image: url("yourimagepath/image.jpg");
background-repeat: repeat x,y;
}

If it isn't tileable, it's more difficult to add and to get it to look right at all screen resolutions.

[Verushka]

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
*/

Thankyou Stevesh for the tip on the side border. I'm been messing around with this for a while. I can pretty much make anything in my cs3 mastersuite with pictures.... so tiling the image is not a problem. I came up with a picture of 150px x 1200px to be the side border.

It would be nice to tile it repeatively to have a smaller picture size... I think what I have is 200kb for this one sidebar image..
that currently displays only on one side. I would like to have it display on both sides of the website.

Right now displaying is only the left side. This is the stylesheet code. Where I got the border to line up at least it is on my widescreen, I'm not sure about a desktop until I get to one to check it.

My brain is tired... but my question is how to have this leaves_sidebar.jpg also be on the right side simultaneously as it shows right now on the left side.
Below is the actually stylesheet.css code.
Thanks a hundred time over...... ahead of time.
V

The website domain name is www.a n n a c l a i r e s h o u s e. com of course the actually domain has no spaces. Just inputting it like this to keep it out of the search engines.
Thanks so much!

body {
margin: 0;
font-family: maiandra gd, verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #ffffcc
background-attachment:fixed;
background-color:#ffffcc;
background-position:center center;

background: url(../images/leaves_sidebar.jpg) 200px top;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

a img {border: none; }

[stevesh]

background: url(../images/leaves_sidebar.jpg) 200px top;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}


If the image is tileable, the red part should be background-repeat:repeat x,y;

That will repeat it horizontally and vertically, and will let you use a pretty small image if you want, assuming the pattern is small enough.

[Verushka]

[FONT=Century Gothic]Adding Side full length border to home page picture is not showing up. It only shows up on the computer that it was created on.

[/FONT][FONT=Century Gothic]Side border image is only showing up on my computer that I put the website up on. When I enter the domain name www. a n n a c l a i r e s h o u s e.com on another computer the left side picture border leaves_sidebar.jpg does not show up. It is a large 200 kb file. In viewing firebug in the css stylesheet code it appears to be the same code as my stylesheet that I put up the website. Does anybody have any answers? It would be most appreciated![/FONT][FONT=Century Gothic]
[/FONT]

[Verushka]

background: url(../images/leaves_sidebar.jpg) 200px top;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}


If the image is tileable, the red part should be background-repeat:repeat x,y;

That will repeat it horizontally and vertically, and will let you use a pretty small image if you want, assuming the pattern is small enough.

[FONT=Century Gothic]
Thanks Stevesh for your quick reply... I downsized my to about 25kb and still keeping the image quality. I see the image on the border but inputing:
background-repeat: repeat x, y:
is making the whole backgrounds be the image. I only wanted the tile image to show about 150 pixels left and the whole length of the website, and also 150 pixels wide to the right side of the website and its length. Just like a couple inches of border with the image not the whole background. I thought I had it last night because when I pulled up the domain name it did it. I input the 200 pixels top, info and I thought I had it. But when I checked it on another computer the image border was not showing. Can you please send the coding for inputting about 150px wide border on both the left and right side of the website.
Thanks so much in advance..........
[/FONT]

[gjh42]

The standard wording is

background-repeat: repeat;

This is the default, so there is no need to state it at all unless something previously forced a different repeat pattern. CSS allows either one instance of a background image in a direction, or repeated continuously across the screen - nothing in between.
If you are seeing this body bg all across your page, you need to give a non-transparent background to #mainWrapper.

[stevesh]

I should have read your original post more closely - what you want is a border on each side of mainWrapper.

This lengthy thread explains how we did that once - should work for you, too:

http://www.zen-cart.com/forum/showthread.php?t=102274

Um, I like the look of your site, but that background image, not so much.

[Verushka]

[FONT=Century Gothic]Hi Stevesh,

I'm going to work on all the current support information in getting the side border to show. The background image looks better at 150px on only the sides... I hope you like it better once I figure out how to input the sides border . I don't think it looks good as the whole background either. Let me know please, if after I size the border right, if it still doesn't appeal to you.

V
[/FONT]

[Verushka]

Typo error in the code it is
background-color: non-transparency;

V

The standard wording is

background-repeat: repeat;

This is the default, so there is no need to state it at all unless something previously forced a different repeat pattern. CSS allows either one instance of a background image in a direction, or repeated continuously across the screen - nothing in between.
If you are seeing this body bg all across your page, you need to give a non-transparent background to #mainWrapper.

Thanks for the information Glenn. I tried what Stevesh advised and downsized my image and then input the repeat tiling code in stylesheet.css of:

background-repeat: repeat x,y;

This worked abut the image tiled filling the page. I tried
background-repeat: -y;
to see if it would just tile on vertically. I changed the picture size to 150px the width and 800px long. But this didnt' work, the image still filled the page. I wanted just to fill about 150px on the sides of the website. Still working on figuring out the right code.

The transparency part... I noticed in firebug when I was checking the code it kept saying transparency.
So I'll input as recommended
background-color: non--transparency;

Thanks everybody for sending information.... it really helps this coding stuff is extremely overwhelming.