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

Background Colour For Paragraph

  • # May 25, 2009 at 7:14 pm

    Hello people.

    I’m having a little trouble setting the background colour of only the text within a paragraph, rather than the entire paragraph (block) having the background colour. I hope that makes sense. Here’s an example:

    This is what I am trying to achieve:


    This is what I am getting:


    I can’t for the life of me get it to happen although I’m sure I’ve done this accidentally before!

    Any help would be great.

    # May 25, 2009 at 11:55 pm

    The cause of the undesired affect is that Paragraphs are "block level elements" (ie, they make a rectangle).

    You can either a) make paragraph "display:inline" (or similar), or b) add a <span> (which is an inline element) inside your paragraph and assign the background color to that.

    Make sense?

    # May 26, 2009 at 12:00 am

    This is paragraph text enclosed by span with a different background-color
    lets check

    This is paragraph text with paragraph styling

    # May 26, 2009 at 9:29 pm

    Works a treat, thanks gents.

Viewing 4 posts - 1 through 4 (of 4 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