X-Cart forums

[JWait]

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!

[Janel]

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?

[JWait]

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.

[Janel]

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.

[modibaba]

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

[JWait]

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.