Member Avatar for 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.

  • 2 Contributors
  • 9 Replies
  • 132 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

asked for a background that grows and shrinks with text, and showed a working, legacy approach. For readers revisiting this: there are cleaner, more robust ways today that avoid visible seams and handle zoom, font-size changes and high-DPI displays.

One modern option is CSS border-image. It effectively performs a 9-slice on your artwork so corners stay intact while edges scale or repeat. That removes the need for extra wrapper spans and keeps the box responsive. Example:

.box {
  border: 16px solid transparent; /* match slice size */
  border-image: url(border.png) 16 stretch;
}

See the spec and examples on MDN: border-image.

If the design is primarily lines or simple shapes, use SVG for the background. SVG scales crisply at any height and never produces seam artifacts. An SVG file (or a data-URI) can be used directly as background-image, and it will expand with the element without blur on retina displays.

For patterned lines you can also recreate the effect with CSS gradients and background-size. Gradients produce tiny, resolution-independent assets and let you control spacing without image seams. If you must use a raster image, background-size: 100% 100% or background-size: auto 100% will stretch it vertically instead of repeating (but note this can distort the artwork).

Quick tips: prefer vector/SVG for scalable decorations; supply high-DPI raster versions if you must use PNG; avoid fixed heights so the container can expand with text; test with increased font sizes and browser zoom. If seams still appear, switch to SVG or CSS gradients — they give the cleanest, most future-proof results.

Recommended Answers

All 9 Replies

Member Avatar for 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!

Member Avatar for 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

image.jpg 9.81 KB
Member Avatar for 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 ?

Member Avatar for autocrat

sorry for the typo's etc.

Member Avatar for autocrat

Well, does that work for you ?

Member Avatar for scru

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

Member Avatar for 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 ;)

Member Avatar for scru

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

Member Avatar for autocrat

Glad :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.