Stretch background horizontal, then vertical

[tillaart36]

ok i just started some work on css and html and I designed a very basic website layout in Photoshop. In photoshop I made vertical slices so i can repeat these images horizontally for each div. I now want to know how i can add a horizontal slice (a slice containing the whole horizontal bottom pixelrow) that I then can repeat vertically as long as the page content gets...

The horizontal repeating images are gradients and when the page gets longer then this gradient I want the bottom row of all the gradients to repeat in vertically direction.

[mexabet]

To repeat a background image horizontally, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat-x;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

To repeat a background image vertically, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat-y;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

If you want to repeat a background image both horizontally and vertically, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

As you can see, the difference in these styles can only be noticed in the CSS files. Horizontal repeating shows as: repeat-x;, vertical repeating shows as: repeat-y; and repeating both ways shows simply as: repeat;

[tillaart36]

Thanks for your reply, but these things I allready knew so probably my explanation wasn't clear enough.

I use gradients that change color from top to bottom (too some height after that the gradient will stay one color untill the bottom of the page...) I allready found out something more about my problem. What i do now is set a color for a div (which is the bottom color of my gradient) and a gradient as background image that repeat's in x. What happens when a page extends the dimensions of the gradient image it takes on the color of the bottom of the gradient (exactly what i was looking for).

Here's my code:

CSS:

body, 
html {
	margin: 0;
	padding: 0;
	color:#000;
}

body {
	min-width: 1000px;
	background-color: #84e653;
	background-image: url(images/float_left_bg.gif);
	background-repeat: repeat-x;
}

#wrap {
	background-image: url(images/float_left_bg.gif);
	background-repeat: repeat-x;
	width: 920px;
	margin: 0 auto;
}

#header {
	background-image: url(images/header_bg.gif);
	float: left;
	width: 590px;
	height: 290px;
} 

#nav {
	background-image:url(images/navigation_bg.gif);
	float: right;
	width: 290px;
	height: 290px;
}
#navfloatleft {
	margin-top: 60px;
	float: left;
	margin-left: 40px;
	color: #E33A6A;
}

#navfloatright {
	margin-top: 60px;
	float: right;
	margin-right: 40px;
	color: #E33A6A;
}

#main {
	background-color: #84e653;
	background-image: url(images/content_bg.gif);
	background-repeat: repeat-x;
	float: left;
	width: 590px;
}

#sidebar {
	background-color: c8ff78;
	background-image: url(images/news_bg.gif);
	background-repeat: repeat-x;
	float: right;
	width: 290px;
	min-height: 1200px;
}

#footer {
	background-image: url(images/footer_bg.gif);
	position: static;
	height: 80px;
	clear: both;
}

And some basic html to test when i make some basic html to test it, it almost works fine:

http://img223.imageshack.us/my.php?image=testjh3.jpg

Now how can i get the columns for the main content and my sidebar to both get the same length undependent of the amount of text in them? I've tried to look for the faux columns technique but I dont think this works because of the gradient backgrounds...Maybe I can specify 2 background images (the gradient untill some y-value and the colour of the bottom of the gradient from that y-value on untill the bottom of the browser or something...)

PS. Probably there are a lot of mistakes in my css...you can point them out but for now im mostly interested in solving the equal column length problem...

Thanks so far!

[mexabet]

Since I don't see your HTML file, I can only guess. Define the height of the main content DIV and every other thing inside it will fit in.

[opsryushi]

It would help if we were able to better understand what, precisely, you are trying to do. I'm afraid I can't understand...