The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Alter background image depending on length of text.

  • # November 15, 2012 at 10:17 am

    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

    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?



    # November 15, 2012 at 10:27 am

    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.

    # November 15, 2012 at 10:36 am

    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.

    # November 15, 2012 at 10:37 am

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

    # November 15, 2012 at 10:56 am

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

    # November 15, 2012 at 11:18 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed