- This topic is empty.
October 5, 2011 at 8:55 pm #34652
Hey guys .. new here, have been looking online for a solution for some time, but looking for a way to add a ragged background color to text that spans multiple lines. I dont want a rectangle behind the full text, but just behind each line of text. Is there a preferred method of achieving this ?
Any help would be great.
thanksOctober 5, 2011 at 10:11 pm #88576TheDocMember
Do you have a picture of what you’re trying to achieve? Can’t quite picture it.October 6, 2011 at 1:01 am #88587standuncanMember
You can use a small grunge texture and have it repeat as the background of your
tags or heading tags. I think that is what you mean. And if you don’t want it to look too much like a repeating pattern you can look up randomizing multiple background images with CSS3. I think that is what you are asking??October 6, 2011 at 2:13 pm #88635
Hey … so the effect I’m looking to do can be viewed here : http://dl.dropbox.com/u/2128494/raggedTitle.png
Hope that makes sense, and is achieveable. Setting it to be the background of a header tag just does a solid rectangle, and not on a per line basis.
Hope that makes sense.
thanksOctober 6, 2011 at 2:15 pm #88637chrisburtonParticipant
line-height should be the fix for that.
Edit: I skimmed too quickly. I see you don’t want the rectangle it outputs.
Aaaahhhh. That’s a little more tricky I think. I have a feeling you might need to use JS. I would try to find a site that is doing the same thing and see what they are doing.October 6, 2011 at 2:21 pm #88640chrisburtonParticipant
@thedoc I spoke before refreshing and see that we both came to the same conclusion. So again, I would say use lettering.jsOctober 6, 2011 at 3:11 pm #88643October 6, 2011 at 8:51 pm #88664
Oh thats great … thanks very much !! Some cliping happening on the decenders, but can probably sort that out. Thanks again ! You guys rock.November 29, 2011 at 5:29 am #91483
So this works well … however if the text spans multiple lines it sits flush to the left side. Is there anyway (i assume not) through CSS to keep padding on multiple lines. If i add padding to the span, it includes it at the start of the first line, and the end of the last line.
thanks guys !December 13, 2011 at 10:47 pm #92662kookaMember
Hi mate… the test link is not up anymore…
What solution did you end up using?
- The forum ‘CSS’ is closed to new topics and replies.