Graphic Text containers that stretch

[scru]

Hi. I'm new to web design, somewhat. I was wondering if there was some way to have a text background stretch with it, sort of. Like the forum posts on this site, you would notice the lines kinda follow the text.

[autocrat]

Not quite sure what you are asking for here...

If your text is in a container, such as a Div, then you can apply a Background to that.
You then have the options of the background Not Repeating, or Repeating along the X, the Y or both XandY axis...

If you are wanting it to appear "framed", such as a pretty box with curved corners, there are multiple ways of doing this, but I still prefer to sue either several nested Divs or a parent Div with several Spans to hold the images as backgrounds.

If you can supply more information, I can supply more details!

[scru]

Well I'm not sure if a repeat would work. The thing is, I want to use the image attached below to use as a background for the text. But i want it to sort of stretch (vertically) -- up if the text is less, or down if the text is more.

I hope you understood that. The reson I dont want to use repeat, is that lines would appear at the end of each repeat

[autocrat]

Okay, thats a pretty big box...

so is your text going to "fit" inside that box exacctly?
(If so, what happens if the user changes text-size or your styling doesn't cover all browsers corretly? It will look broken straight away!)

If it is to be fixed width (all ways easier), then you can cut the image into 3 horizontal strips... the very top 10px, 10px from the middle and the last 10px.
Then you can make a Div, suing the Middle strip for the BG and tell it to repeat-y... and insert two spans.
The first span you put before the text, the second goes after.

...so something like...

<div class="prettybox1">

<span class="topofbox"></span>

Contents goes here

<span class="bottomofbox"></span>

</div>

...then try something like the following...

.prettybox1
{
margin: 0;
padding: 10px;
width: NNNpx;
position: relative;
background-color: #ffffff;
background-image: url(images/pretyboxbg.jpg);
background-repeat: repeat-y;
}

.prettybox1 span
{
position: absolute;
left: 0;
display: block;
height: 10px;
width: NNNpx;
}

.topofbox
{
top: 0;
}

.bottomofbox
{
bottom: 0;
}

that means that no matter the amount of text, it will alsways remain in the box, and it will always look pretty (bigger text resutls in the box shrinking in height, but the images move with it.

Alternatively, if you want the box to stay the exact size, (not good by the way!), then you will want to use overflow: scroll; or overflow: auto; so that if the text doesn't fit, then people can at least scroll to read it!
(in which case you may want to have 2 Divs... theouter one with the BGIMG, the inner one being set to about 16px less in width and that has the Overflow set on it.... so your box still looks pretty, even if the scroll bar is needed (as it appears inside the pretty box, not over the top of it!))

thatany help ?

[autocrat]

sorry for the typo's etc.

[autocrat]

Well, does that work for you ?

[scru]

Haven't gotten to try it yet, but Ill let you know as soon as I do

[autocrat]

what? You where here when I posted it :)
ah well, let us know ... if I missed anything, I may simply build a demo and point you to it... easier for me to build than theorise ;)

[scru]

Ok so yeah, I got it to work, although I did some minor tweaks to get it just right.
Thanks

[autocrat]

Glad :)