Stretching Images help

[Dav Shoots]

Well I'm kind of a css noob, and right now I am trying to make everything stretch so that it fits the text. This is the closest that I have gotten to begin right, but it still comes out very weird. The url to a page using this css is Http://www.davsstuff.com/compton.php?postid=3

<style type="text/css">
<!--

.content {
       position: absolute;
        left:15px;
	top:10px;
	font-size: 75%;
}

.title {
	position: absolute;
	left:18px;
	top: 1px;
	font-size: 100%;
}

.link1 {
	position: absolute;
	left:600px;
	top: 4px;
	font-size: 65%;
}

.link2 {
	position: absolute;
	left:670px;
	top: 4px;
	font-size: 65%;
}

.link3 {
	position: absolute;
	left: 737px;
	top: 4px;
	font-size: 65%;
}

body, html {
height: 100%;
}

body {
text-align: center;
font-family: verdana;
}

div {
text-align: left;
}

html>body #centered {
height: auto;
}

#centered {
width: 755px;
height: 100%; 
min-height: 100%; 
margin: 0 auto; 
}
#Table_01 {
	position:relative;
	left:0px;
	top:0px;
	width:800px;
	height:600px;
        text-align: left;
        margin: 0 auto;

}

#n2-01 {
	background:url(images/n2_01.jpg);	
	position: absolute;
	left:0px;
	top:0px;
	width:800px;
	height:100%;
}

#n2-02 {
	background:url(images/n2_02.jpg);	
	position:absolute;
	left:0px;
	top:75px;
	width:102px;
	height:100%;
	background-repeat: repeat-y;
}

#n2-03 {
	background:url(images/n2_03.jpg);
	position:absolute;
	left:102px;
	top:75px;
	width:604px;
	height:100%;
}

#n2-04 {
	background:url(images/n2_04.jpg);
	position:absolute;
	left:706px;
	top:75px;
	width:94px;
	height:100%;
}
#n2-05 {
	background:url(images/n2_05.jpg);
	position:relative;
        left:102px;
	top:95px;
	width:604px;
        height:100%;
}
#n2-06 {
	background:url(images/n2_06.jpg);
	position:relative;
        width:604px;
	left:102px;
	top:577px;
	height:100%;
}

[DocType]

If I'm enterpreting your problem correctly, you want the text to be centered vertically withing the lines of the background image.

You might position the image so that the very first line sits right at the top of the containing div, then set the line-height on the text, so that it centers between the lines.

That's a tricky design to work with, if the user resizes the text, it can get ugly.

You might want to consider dropping that particular image, and place the text in plain box instead, with maybe a background color or light image that the text doesn't have to center on.

[Dav Shoots]

I'm sorry if I was not clear, but what I was trying to do with that is make it so the site was long enough vertically to fit in all the text from the php script.

[DocType]

Sorry, your title was misleading.

I think the problem may be in that you're using absolute positioning, absolutely positioned elements are removed from document flow, so other elements will treat them as if they're not there at all.

Try using relative positioning instead.

If the image is tiled vertically, it will continue to tile as the div expands vertically for content.

[Dav Shoots]

how do I make it so it is not tiled but streched?

when I make the positions relative, it gets really messed up, how would i fix that?

http://davsstuff.com/compton.php?postid=3

[DM3Dan]

I had the same problem when I tried relative positioning once. Good luck with that Dav.

[DocType]

I'm not sure exactly what you mean by stretched.

You can give the image a height/width that's larger than the original image and it will stretch, but it'll likely look blured.

It's best to use an image that will tile nicely.

As for relative positioning, it depends on what you're trying to do really.

If you could post a mock-up of what you want to do, it would make it much easier to find a solution.

[DM3Dan]

He means, if the text is larger than the image can handle, it expands to fit it; along with the other slices.

[DocType]

He means, if the text is larger than the image can handle, it expands to fit it; along with the other slices.

Ahh, now I see.

I think the key word is "slices".

He'd have to have each post in seperate elements, with the image before and after(above and below) the text.

When the text is larger it will force the bottom image down, creating the illusion a stretching image.

I don't think you can do that with a background image without slicing it up, so that the lines are foreground images above and below the text, and the background is tiled, if the background is a solid color you could just use the foreground images, and set a background color for the elements.

Or you might use JavaScript or some other scripting language, and load a scalable image.

It would be complicated to say the least. A scalable vector graphic with a script to scale it might work, but that's a whole nother discussion forum.

I think the end result of either method would look pretty much the same, so you're better off going with the simplest method.

A forground image above and below the text in a stretching element with it's background color set or a tiled background image for the background.

I think the text could actually be floated, and the bottom foreground image given a clear statement.

Not a whole lot different from using a <hr> between page sections.

You could actually use <hr> and give it a user defined background, that would allow you to set a height and width, by adding <hr class="stretch">.

Believe it or not, <hr> is still a valid html tag, so theirs no reason you couldn't use it, and it doesn't require an end tag = less markup.

[Dav Shoots]

Well first off i dont know one bit about javascript, so that is out of the question, but I think I might completely redesign without a background slice, and just make a header, and side bars.

[DM3Dan]

If all else fails, fix your background image so you can overflow: auto; it.

[DocType]

Not sure if this is the look you're going for, but it might give you some ideas.

It uses a method called image-frames, you could replace the image with your text.

Here's the link. http://www.bigbaer.com/css_tutorials...ame.styles.htm