Ok, currently on a webpage I'm making I have a BG pic in the top left corner. What I am hoping to achieve is having another pic on the left below that which repeats on the Y-axis, until it get to the bottom where there is another pic below it.<br />
<br />
This is the type of shape I'm aiming to achieve:<br />
<br />
////////////////////<br />
///////////////////<br />
//////////////////<br />
/////////////////<br />
////////////////<br />
///////////////<br />
//////////////<br />
/////////////<br />
////////////<br />
///////////<br />
//////////<br />
/////////<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
\\\\\\\\\<br />
\\\\\\\\\\<br />
\\\\\\\\\\\<br />
\\\\\\\\\\\\<br />
\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\\\<br />
<br />
Where the middle straight section is the one that repeats to the bottom.<br />
<br />
Here is the link to the page I have made currently<br />
<!-- m --><a class="postlink" href="http://www.angelfire.com/in4/star_cleaver/tut.html">http://www.angelfire.com/in4/star_cleaver/tut.html</a><!-- m --><br />
<br />
I just need to know how to do this, or if it's possible to have more than one pic in the background.<!--content-->no you can't have more than 1 image as the background. you can only use 1.<!--content-->Seriously, that should be fixed!<br />
<br />
well I wourd say put a table in, and then in the top left corner put the picture you want, in the bottom right corner put the picture you want and then in the middle, make the back ground the repeating picture.<!--content-->I presume the content over the top and bottom areas will be fairly static. i.e. the middle section is the dynamic area where content amount will change and hence a repeatable background is needed.<br />
<br />
Set yourself up a table with 3 rows. The top and bottom TD's fixed in size and place your fixed size BG in them. The middle section can have a reapeatable background then in one axis using a little CSS. Quite simple really.<!--content-->Yea I will probably use the table method, the other suggested one I have gotten is making the middle image a repetitive BG and using div's to position the other two, but I have much more experience with tables so I'll try that method first.<!--content-->oh divs that is a good idea, but I dont think netscape does well with div's.<!--content-->netscape does better with divs than IE does since they follow standards, old netscape versions dont, but anything 6+ is good<!--content-->Man, my comp crashed and I only just got it back working again, (just installed another OS alongside my current one, its a temporary fix).<br />
<br />
Anyways I tried it with tables but it didn't quite work, because the bg pic was always i pixel away from the edges, so it didn't look very good, I'll keep fiddling with it or just use div's.<br />
<br />
You guys have been alot of help.<!--content-->that is because you need to set your page margins to zero<!--content-->The one pixel away thing is similar to the problem here: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=29667">http://www.htmlforums.com/showthread.ph ... adid=29667</a><!-- m --><br />
<br />
I think that the solution is the same.<!--content-->correct, and just to fix this one and yours you need this<br />
<br />
body {<br />
background-image:url(../images/bg.gif);<br />
background-repeat:repeat-y;<br />
background-color: #99AACC;<br />
margin: 0;<br />
}<!--content-->thanks scoutt...that's much better than all those other commands in the html body tag.<!--content-->
<br />
This is the type of shape I'm aiming to achieve:<br />
<br />
////////////////////<br />
///////////////////<br />
//////////////////<br />
/////////////////<br />
////////////////<br />
///////////////<br />
//////////////<br />
/////////////<br />
////////////<br />
///////////<br />
//////////<br />
/////////<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
||||||||<br />
\\\\\\\\\<br />
\\\\\\\\\\<br />
\\\\\\\\\\\<br />
\\\\\\\\\\\\<br />
\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\\<br />
\\\\\\\\\\\\\\\\\\\<br />
<br />
Where the middle straight section is the one that repeats to the bottom.<br />
<br />
Here is the link to the page I have made currently<br />
<!-- m --><a class="postlink" href="http://www.angelfire.com/in4/star_cleaver/tut.html">http://www.angelfire.com/in4/star_cleaver/tut.html</a><!-- m --><br />
<br />
I just need to know how to do this, or if it's possible to have more than one pic in the background.<!--content-->no you can't have more than 1 image as the background. you can only use 1.<!--content-->Seriously, that should be fixed!<br />
<br />
well I wourd say put a table in, and then in the top left corner put the picture you want, in the bottom right corner put the picture you want and then in the middle, make the back ground the repeating picture.<!--content-->I presume the content over the top and bottom areas will be fairly static. i.e. the middle section is the dynamic area where content amount will change and hence a repeatable background is needed.<br />
<br />
Set yourself up a table with 3 rows. The top and bottom TD's fixed in size and place your fixed size BG in them. The middle section can have a reapeatable background then in one axis using a little CSS. Quite simple really.<!--content-->Yea I will probably use the table method, the other suggested one I have gotten is making the middle image a repetitive BG and using div's to position the other two, but I have much more experience with tables so I'll try that method first.<!--content-->oh divs that is a good idea, but I dont think netscape does well with div's.<!--content-->netscape does better with divs than IE does since they follow standards, old netscape versions dont, but anything 6+ is good<!--content-->Man, my comp crashed and I only just got it back working again, (just installed another OS alongside my current one, its a temporary fix).<br />
<br />
Anyways I tried it with tables but it didn't quite work, because the bg pic was always i pixel away from the edges, so it didn't look very good, I'll keep fiddling with it or just use div's.<br />
<br />
You guys have been alot of help.<!--content-->that is because you need to set your page margins to zero<!--content-->The one pixel away thing is similar to the problem here: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=29667">http://www.htmlforums.com/showthread.ph ... adid=29667</a><!-- m --><br />
<br />
I think that the solution is the same.<!--content-->correct, and just to fix this one and yours you need this<br />
<br />
body {<br />
background-image:url(../images/bg.gif);<br />
background-repeat:repeat-y;<br />
background-color: #99AACC;<br />
margin: 0;<br />
}<!--content-->thanks scoutt...that's much better than all those other commands in the html body tag.<!--content-->