adding image border to the sides of homepage

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.

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.

/**

• 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:wink:

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

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.

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

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!
**

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.

Thanks Stevesh for your quick reply:yes:... 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..........

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.

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.

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.:yes:

V:wink:

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

V

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.

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.
:flex:

There are some excellent tutorials on code essentials on the internet.

I frequently use those at https://www.w3schools.com .

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.

Thanks Stevesh.... I will review the referred thread tomorrow. I was able to get the left side border by inputtting in this code:

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

body { 

color: #382b1f;
background-color:#333300;
margin-top: 1px;
margin-bottom: 0px;
background-image:url(../images/leaves_sidebar.jpg);
background-position:117px top;
background-repeat:repeat-y;
background-attachment: fixed;
}

But what I noticed is that after asking a couple people to view it on their computers that the border was aligning different on each computer. Can you refer a thread on this... If this is in the 4 page one already sent nevermind. Also do you think the background image is okay now that it is narrower then the last time when it was tiled on the whole page?

Thanks for the input every little bit helps:flex:

Thanks for the link info I'll review it tomorrow. I was on there today for a little while on there on no... I just looked it up...

http://jigsaw.w3.org/css-validator site checking for code errors. Oh it appears to be that site. It's still a little overwhelming in trying to figure this out. It appears side borders on images are always referenced for all around picture borders not just the sides of the websites. I've been searching for about three days now..... more or less now.

On THIS SITE I have a background image that creates a "border" - (a drop-shadow effect actually) around the main wrapper.

It is quite simple to achieve.

If you view that site in FIREFOX and "right click" on that site, outside the main wrapper, then choose "View Background Image", you will see that it is nothing more than a thin white horizontal "bar" with two grey tufts on either end. (Save the image if you like and view it in an image viewer/editor.)

The center part of the image is plain white, and the white section is the same PIXEL width as the Main Wrapper (800px).

#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 800px;
	vertical-align: top;
	border: 1px solid #9a9a9a;
	}

The image is stored in the images folder of the operational template.

Then, the CSS declaration that governs the image's behaviour is:

body {
	background-image: url(../images/shadowback.jpg);
	background-repeat: repeat-y;
	background-position:center;
	}

Yep, that would be the way to get a 150px (only) wide background on either side of your mainWrapper, assuming your page is a fixed width. The only time that would shift is when the window is narrower than the mainWrapper, and the sides will be offscreen then anyway.