Forums

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

Home Forums CSS Alter background image depending on length of text.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40821
    dannygreen
    Member

    Hi Guys!

    I’m working on a client blog project, I’m wanting to use a graphic as the background image of a category link, similar to how Paul Boag has used on his redesigned site http://boagworld.com

    The image source is one PNG which resizes depending on the length of the category name, without distorting the ends of the tag.

    Can anyone recommend any articles or tutorials covering this?

    Thanks

    Danny

    #114430
    Paulie_D
    Member

    I’m confused..are you adding the bg image to the text or the element holding the text?

    It’s difficult to tell which example you are trying to specify from the link you gave.

    #114432
    Paulie_D
    Member

    If you mean this img

    Then it’s a ‘cheat’ if you will.

    The way it’s done is to have a span which only uses the left part of the image as it’s background.

    The span is wrapped around a link which uses the right end of the image as it’s bg.

    The rest is done with padding/margins.

    #114433
    dannygreen
    Member

    Apologies, yes it was that image I was referring to.

    #114440
    dannygreen
    Member

    Thanks!
    It may be a cheat, but a clever one.
    Thanks again

    #114451
    Paulie_D
    Member

    You actually don’t need the span if you use pseudo elements.

    http://codepen.io/anon/pen/drDaz

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