Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Ragged background color behind titles

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 5, 2011 at 8:55 pm #34652
    jtrusz
    Member

    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.
    thanks

    October 5, 2011 at 10:11 pm #88576
    TheDoc
    Member

    Do you have a picture of what you’re trying to achieve? Can’t quite picture it.

    October 6, 2011 at 1:01 am #88587
    standuncan
    Member

    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
    jtrusz
    Member

    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.
    thanks

    October 6, 2011 at 2:15 pm #88637
    chrisburton
    Participant

    line-height should be the fix for that.

    Edit: I skimmed too quickly. I see you don’t want the rectangle it outputs.
    I think you may need javascript for this. Try lettering.js

    October 6, 2011 at 2:18 pm #88639
    TheDoc
    Member

    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 #88640
    chrisburton
    Participant

    @thedoc I spoke before refreshing and see that we both came to the same conclusion. So again, I would say use lettering.js

    October 6, 2011 at 3:11 pm #88643
    rch
    Participant

    Can this help?
    test

    October 6, 2011 at 8:51 pm #88664
    jtrusz
    Member

    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
    jtrusz
    Member

    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 #92662
    kooka
    Member

    Hi mate… the test link is not up anymore…
    What solution did you end up using?

    cheers

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.