Hello everyone,

Well, I have a basic idea of how this is done but I want to make sure.

On this site, http://www.heartbreaker39.org u can see the background is basically a line with two grey fillings at each end...Now, I'm assuming that since background images repeat, this causes it to look like two long grey sides and one big white middle going all the way down to the bottom of the page. How is this done? How do you align it correctly and how do you make those little background lines to go all the way down the page?

Thanks

Michael

They actually didn't do anything with positioning, just made sure the top image made it look the right way. This is the basic code you need for the background, if you go to the CSS page it explains each section and the values you can put in. http://www.lissaexplains.com/css.shtml

body
{ background: #000000;
background-image: url(value);
background-repeat: value;
background-position: valueI valueII;
background-attachment: value; }

I think we are misunderstanding each other. Here is another example: http://www.breakmyfall.org

See, the background is this:

http://www.breakmyfall.org/images/cabg.gif

And then without any code it just repeats down the page and she can align her iframes (part of the image starts with those yellow boxes and then the background line is positioned so it continues down I guess). That is really what I want to do. Learn how to make that line with a tiny bit of the colored tables aligned so they match up with that part of the image. Am I making sense? :(

you'd do this:

body
{ background-image: url(FILENAME);
background-repeat: repeat-y;
background-attachment: fixed; }

repeat-y makes the background image tile vertically [like in the example you showed me]..

then for the boxes of content positioned over it you can use DIVs, since those are automatically transparent so you wouldn't have to do anything to them to make them scroll.. and if you don't specify a height, they'll just keep "growing" to fit your content:

<DIV style="position: absolute; left: ##px; top: ##px; width: ##px;"> text here </DIV>

edit the bold parts.. left is the number of pixels from the left, top is the number of pixels from the top, width is how wide it is.. you can copy and paste that code into your coding as many times as you want [for as many DIVs as you want].. hope that helps? :)

Hmm, okay you mean I would have to make a background line and then use DIVs to write content on them? I'm sorry I really don't understand how I would do that. I mean how do you align it err :(.

I will really try to explain exactly what I mean lol...Maybe I'm misunderstanding myself :rolleyes:

Okay he has the same thing with those red boxes:

http://tastevenom.net/jessica.php

If you see the background before the pic loads you would see that the red boxes start at the top and go all the way down to the bottom of the page and he has some of these boxes already started in his graphic:

http://tastevenom.net/jessicalay.jpg

http://tastevenom.net/jessicalay1.jpg
And in his background (although its hard to see, I had to zoom in with psp, he has a part aligned with the same color right where those boxes would be
like: black-black-red box color- red box color-black-black and when he puts that as his background it repeats and the red boxes look like they are completely connected in a straight line down). Then I think he used DIVs for the content. This is what I really want to do.

Did that make sense or am I still not being clear enough lol? :(

Thanks again!

I'll try to explain the whole process (starting with the image) to see if that helps...

Make your image, then at the bottom of it start one of the line background things, with your page background and the column background where you want it to show up. Doesn't have to be a lot, 10px wide or so should be enough to determine how you want it to look. You can place the columns wherever you want.
After you save that image, crop it down so that only the lines part is showing. That will be your background image.
Use the code sal posted to include your background. Position your divs/iframes so that they are on the coloured columns you made.
This is just the basic part for having it on the left side of the page, if you want it centred it'd be slightly different.

Wow, I think I get it now. Thanks everybody! (especially kittycat) :D