Background color for inline text

In searching for a solution to a CSS problem I had I stumbled over another interesting problem, similar to mine. Most people seemed to agree that it
was impossible to do in pure CSS. The effect those people were after is commonly used in magazines where text with a background color is put over an image. A simple effect hard to achieve.

One solution was to surround each line of text using styled span elements. Another solution used ”a teeny weeny jquery” to solve the problem. I’m sure it’s a solid solution but using jquery and javascript to be able to style text is, well, wrong. Forcing editors to add invisible span elements in text is also not a good idea. But - the effect can actually be achieved using css only and still keep the html simple and semantically correct.

If you use a block element, like <p>, and set the background color, it will be  a filled square behind the text. By setting the css display property to inline you get  close to the effect wanted.

So far it is simple. The problem then is that using padding on inline text will only affect the horisontal padding (text indentation) on the first and last line of text. You get the following effect.

In order to get the effect we want we need to add two elements. A surrounding block element (div) surrounding the paragraph and an inline element (span) surrounding the text inside the paragraph. Both of which is semantically without meaning.

First we add a left border on the surrouding block element. Then we move the text in the span element slightly to the left. The background color is set on the paragraph and does not move. Using this neat little trick we simulate text padding or indentation on each line of text.

Finally we need to fix the vertical padding and line height to get rid of the spacing between the text lines. The end result is not perfect. There are still problems when the user resize text and you need to be careful with the spacing in Internet Explorer. But it’s a good start.

Chrome sometimes change line height seemingly in a random fashion when inserting html <br>. Setting white-space to pre-line fix this behaviour. If not for Internet Explorer it could be simplifed further. Internet Explorer does not seem to support white-space: pre-line. So Internet Explorer still needs manually added html breaks.

The full source

<pre>
<html>
  <head>
  <style type="text/css">
  div#column {
    border-left: 6px solid #000;
  }

  p.subs {
    display: inline;
    font: bold 14px/18px arial;
    color: #fff;
    background: #000;
    padding: 1px 0 1px 0;
    white-space: pre-line; /* Not understood by IE, use manual br for IE */
  }

  p.subs span {
    position: relative;
    left: -3px;
  }

  p.subs br {
    display: none;
  }
  </style>


  <!--[if IE ]>
    <style type="text/css">
      p.subs br {
      display: inline;
    }
    </style>
  <![endif]-->
  </head>
  <body>
    <div id="column">
      <p class="subs"><span>Ground round <br />
salami pig, meatball short loin frankfurter <br />
short ribs pork hamburger rump <br />
strip steak beef ribs T-bone salami ham hock.</span></p>
    </div>
  </body>
</html>
Tagged with: ,
Posted in Web
28 comments on “Background color for inline text
  1. Nice little snippet, thank you.

    Has anyone figured out how to add the spacing when a manual br can’t be added though?

  2. ismails says:

    Interesting workaround.
    Having to enter manual line breaks for IE’s sake beats the purpose though. How much longer is IE gonna haunt us.

  3. modra ideja says:

    Great workaround, before I have allways used a javascript hack…

  4. Franz Moser says:

    Thanks a lot. Worked fine for me.

  5. Kevin says:

    Any way to also add CSS if I want the same effect with right aligned text?

  6. Optimizacija says:

    CSS tips and tricks are always wellcome. So thanks for this post.

  7. Optimizacija says:

    Thanks for that post.

    These days background color for inline text is often used on websites. Especialy on newspaper websites.

  8. Try this:

    p {
    padding:5px 0;
    color:#fff;
    font-size: 18px;
    display: inline;
    background-color:red;
    box-shadow: 12px 0 0 0 red, -12px 0 0 0 red;
    left:10px;
    position: relative;
    }

  9. Oeps, I forgot something.

    Works in most modern browsers IE9+

    p {
    padding:5px 0;
    color:#fff;
    font-size: 18px;
    display: inline;
    background-color:red;
    box-shadow: 10px 0 0 0 red, -10px 0 0 0 red;
    left:10px;
    position: relative;
    }

  10. Gabriel says:

    Any ideas on how to do it with a paragraph that has text-indent on it?

  11. pike says:

    Martijn de Valks comment is great.

    Your solution (using the border of a surrounding div to create fake padding) only creates background padding where the text aligns (in your example, on the left). On the right, the background is cut very tight to the characters.

    using box-shadow saves you a div, and adds the padding on both sides of the line as well….

  12. This worked fine for me , thanks

  13. Velva Anderholm says:

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). *-

    Our very own internet page
    <http://www.foodsupplementcenter.com

  14. Movies of every genre can be purchased from Buried and Prowl in horror to
    gems like No Strings Attached in romantic comedies.
    At their finest they produce moments that will make life worth living.
    It would be better to have a bootable disc that may diagnose drive and memory problems and supply the Windows recovery environment
    to regenerate your backup towards the same or a new hard drive.

  15. gabssnake says:

    @martijn-de-valk posted a great solution. Anyone trying to accomplish it, look at his comment.

    With his solution, the text change from left, to right or center without changing the code, and it works in fluid and responsive layouts.

    Thanks @martijn !

  16. Hi, I discovered your pge on and although the conteent seems reliable, I wonder if yopur site
    may bee going through a couple internet browser compatibility issues.

    If I view your blog in Chrome, it looks fine however, when
    opening in Firefox, iit has a small amount of overlapping
    difficulties. Just so you know.

  17. ck1 says:

    puma スタジャン

  18. Daniel Moura says:

    Thanks Martijn de Valk, your solution works perfectly !

    Fuck IE<9 :)

  19. Hi there, after reading this awesome paragraph i
    am too delighted to share my experience here with mates.

  20. kat says:

    I think the admin of this website is in fact working hard
    for his web page, as here every data is quality based stuff.

  21. A fascinating discussion is definitely worth comment. I think that you should write
    more on this subject, it may not be a taboo matter but generally people don’t discuss these subjects.
    To the next! Kind regards!!

  22. It’s genuinely very difficult in this busy life to
    listen news on Television, so I just use the web for that reason,
    and obtain the latest information.

    Also visit my web blog; Ton absence Télécharger

  23. Hi there mates, its fantastic post regarding cultureand entirely defined,
    keep it up all the time.

  24. Coffee Bean says:

    I’m not sure exactly why but this site is loading extremely slow for me.
    Is anyone else having this issue or is it a problem on my end?
    I’ll check back later on and see if the problem still exists.

  25. Fredericka says:

    I see a lot of interesting posts on your page. You have to spend a
    lot of time writing, i know how to save you a lot of time, there is a tool that creates unique, google friendly articles in couple
    of seconds, just type in google – k2 unlimited content

  26. Thanks for sharing yohr info. I really appreciate your effodts and I will be waiting for your
    next wdite ups thank you once again.

    My blog post – skin care physicians products

  27. I have read so many posts about the blogger lovers but
    this article is in fact a pleasant paragraph, keep it up.

  28. mbt shoes says:

    eccellente della carne Argentina che viene fornita al mondo e aimercati

2 Pings/Trackbacks for "Background color for inline text"
  1. [...] Background Color for Inline Text - This tutorial shows how to add a background color to text using only CSS. [...]

  2. [...] Background Color for Inline Text - This tutorial shows how to add a background color to text using only CSS. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>