using images for a border?
 

I've searched high and low for this... is there a way to use a repeating image for a border? If so, can someone please post the correct code to do so for css. I really would like to change out my side borders I put on my site with an image that would repeat so it looks like there's a custom border showing. Kinda like this...see how the border is on the sides?

http://web.mac.com/blueowlstudio/iWeb/blueowlstudio/Welcome.html

Thanks in advance...

Janel

Re: using images for a border?
 

anybody???

Also....this is my site I'm working on www.blueowlstudio.com/shop/home.php

I have the borders there but am not sure what I'm doing wrong. If I set the position as absolute like it is the page doesn't expand to fit the window. If I don't put a position code there I get a double line that floats all over the place when I narrow the window up. If I put fixed then I lose my scroll bar and can't scroll up or down the page or side to side. Grrr....

I'm still learning this css stuff so not sure what I may be doing wrong?

And I really REALLY want to have an image border that gives a scalloped edge rather than the basic line...so if anyone can help it would be greatly appreciated.

Thanks in advance...

Janel

Re: using images for a border?
 

Look at skin1/customer/home.tpl (yours may vary slightly from this example but it should still work). Find the are that says "<!-- main area -->". Under that there should be a table.

Add a new cell so it looks like this..

Next, near the bottom of home.tpl find...
And add a cell so it looks like this..

Then in skin1.css, define your leftborder and rightborder classes...

That should do it... although I haven't tried it. :)

Re: using images for a border?
 

thank you for trying...but that didn't work. :(

Still images don't work. And then I just made it a solid line and it only was a line from the headline down to the bottom line...not the entire height of the page. :(

Re: using images for a border?
 

In the example at mac.com the page has a polka-dot background. then a image with a scalloped border on each side of the main "frame". Is that what you want?

Re: using images for a border?
 

Yeah..... :) that's what I want to do in my store as well. I'm hoping I can get it to work for me since I want to have that look throughout.

I had to reinstall my store because I was having some issues with some changes I made and then wasn't sure if I fixed it so I just reinstalled instead. So right now there are no changes...it's just the default store as it comes.

Re: using images for a border?
 

Ok, first in your skin1.css, change it so it looks like this..

[code]

HTML,BODY {
HEIGHT: 100%;
PADDING: 0px;
background: url(images/polkadot.jpg);
}
[code]

and then in either TD.Container or TABLE.container (I forget which one) include "background: url(images/scroll.jpg);".

I don't know the names of your actual images so I used "polkadot" and "scroll". You will need to adjust these accordingly. One thing to note is these images are actually kind of large. If you can cut the polkadot down so that if it repeats itself you can add "repeat-x" after the filename in the css and it will fill the screen horizontally. If you do the same thing to "scroll", maybe making it one "loop" in height, you can add "repeat-y" and it will fill the screen (table) vertically....like this.. background: url(images/scroll.jpg) repeat-y;

Re: using images for a border?
 

Thank you for the help. By you mentioning the td.container it made me think and that's where I ended up adding code to put my side borders. Perfect when it comes to solid lines etc...but images still won't work no matter what I do. I'm thinking I'll have to edit the templates to do this instead of doing it in the css. (web searches I'm finding are saying most browsers do not support border images...hmmm) But...what template would I edit to change all the pages? Haven't figured that one out yet. Tho I do have a ticket in with xcart about how to do so.

To get my border to the top and bottom of the page I ended up having to specify margins for top and bottom (they weren't specified before) in the html body. Background images I knew how to do (thank you tho) it's just the border images...grrr.

But at least thanks to you help I now have borders that are where they're supposed to be and don't mess up and move all over the page. :)

So again...thanks for helping out :) It's much appreciated. :)

Re: using images for a border?
 

Your scroll is not a border image, it is a background image. I have trimmed it so that you can try what I said about adding it as a background image in the TD.container class. I had to resize it to 350x12 as the original 700 width was beyond what x-cart allows to upload to this forum.

Re: using images for a border?
 

I tried that earlier and just redid it to mess with it. (the image isn't what I'll use but it was a quick edit of the original just to try). The only problem is...the image won't stretch with the screen if it's resized and the category boxes etc . move all over the place. How do I keep everything "in place" so to speak? And what would be the best size for the image width so it fits most browsers?

Again....thank you SOOO much for helping me with this. :)

Re: using images for a border?
 

Instead of trying to stretch the image, use a "sliver" of it that can be repeated over and over so that it fills the page. It is difficult sometimes to get it to line up, but it will reduce the size of the image and reduce the time it takes to load.

For instance, make a sliver of the polkadot image. It can either be horizontal, vertical, or a rectangle. It doesn't matter as long as when you place the exact same image next to itself it lines up (in this case, the polka dots. Then in your stylesheet add repeat-x (to repeat across the page) or repeat-y (to repeat down the page), or both (if it is a rectangle).
You can make this the background image for the BODY class.

BODY {
background-image: url('images/polkadot-sliver.gif'); background-repeat: repeat-x;
}

(Be aware may be other things lurking in your css that manipulate the "body"... like
HTML,BODY {
MARGIN: 0px;
PADDING: 0px;
BACKGROUND-COLOR: #FFFFFF;
}



If you resize the new-bg2.gif I cropped to the 700px wide and 24px high that it should be, you should be able to use that as the background for the TD.Container class and it should work for the center section of your site (up tp 700px - you may want to make it wider, say 800px - I just used what you had already). Add the repeat-y to your stylesheet and it should fill the table cell (TD) with your scroll image.

TD.Container {
VERTICAL-ALIGN: top;
background-image: url('images/new-bg2.gif'); background-repeat: repeat-y;
}

You may still have to play with margins but it is a start.

As for "category boxes etc . that move all over the place", that is something else. Don't try to manipulate the columns or boxes, manipulate the images.

EDIT - one other thing. There is a website at http://www.w3schools.com/ that explains all of this. They even let you experiment with it, and best of all... it is FREE!

Re: using images for a border?
 

I've all that and that's what I did as far as image size etc. Like my background dot is just a two dot image that is set to repeat. The background with the scallops is only one scallop high and set to repeat. My only problem now is that the category boxes just go all over the place.

I want to keep them all in place like they have them on this site... http://www.sweetshoppedesigns.com/shoppe/ Like if you make the window wider everything stays in place relative to the background image. On my site nothing stays contained within the background image when you move the window width.

What would I have to fix to do this? Any idea?

Re: using images for a border?
 

Is your center defined?

TABLE.Container { width: 960px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; }

This will make the site 960px, and center it, background color white.

Re: using images for a border?
 

you have officially become my new best friend. :) THANK YOU THANK YOU THANK YOU! Now I just have to play with setting sizes and I'll be set.

You have no idea how much this has frustrated me. I know I'm still a newbie at all this but I usually can figure most stuff out by trial and error. Adding mods, changing things up, etc...usually can work through most of it. This was just something that I couldn't figure out. I could have always kept the "standard" sizes and changed up images and colors etc......but really wanted to have a certain feel throughout. This was the one thing that stumped me and now I am totally excited to get through all the other changes I have planned. :)

Again...thank you SOOOO much. You've totally made my day. :)

Re: using images for a border?
 

Hi, I have resized my store to be 70% so I ended up with two wide white spaces on the sides, so I decided to fill it with a rose, I replaced:
HTML,BODY { margin: 0 7px 0 7px; background: #fff}
with
HTML,BODY { margin: 0 7px 0 7px; background: url(images/rose.gif);}
The rose was repeated everywhere, and filled every space in the store such as the gaps between Featured items and catigories and even next to the main logo.
I understand that what i did has changed the whole background, how can I just fill in the spaces on the sides just like the dots on http://www.sweetshoppedesigns.com/shoppe/??

Re: using images for a border?
 

Do you want the "dots" on the edges as in your example, or in the center?

BODY {
background-image: url('images/polkadot-sliver.gif'); background-repeat: repeat-x;
}
will put it on the entire page...
Then...
TABLE.Container { width: 960px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; background-image: url('images/centerbgd.gif'); background-repeat: repeat-x;}
will put your other background image in the center of the page.