How to Add a Background-Color for the Text Width Instead of the Entire Element Width

  1. Solution with an inline element
  2. Solutions with the CSS display property
  3. Related Resources

In this tutorial, we’ll demonstrate some methods that you can use to set a background-color, which corresponds to the text width and not the width of the whole element. You’ll need CSS properties as well.

Solution with an inline element

In the following example, we have a heading in <h1>, inside which we add an inline element (<span>). The next step is to set the background-color on the <span> element.

The inline element is as big as its content, and this will solve the problem.

Example of setting a background-color for the text width with an inline element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        color: #fff;
      }
      h1 span {
        background-color: #43d9cf;
      }
    </style>
  </head>
  <body>
    <h1>
      <span>Lorem Ipsum is simply dummy text</span>
    </h1>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text

Solutions with the CSS display property

Another way of solving the problem is by using the display property set to its "table" value. Note that no parent element is required.

Example of setting a background-color for the text width with the display set to "table":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        display: table;
        margin: 0px auto 0px auto;
        padding: 3px;
        font-size: 24px;
        background-color: #30cf52;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum is simply dummy text</h1>
  </body>
</html>

The next example requires a parent element, so we use a <div> element as a container. Here, we set the display to "inline-flex" for the <h1> element and the text-align to "center" for the container.

Example of setting a background-color for the text width with the display set to "inline-flex":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        text-align: center;
      }
      h1 {
        display: inline-flex;
        padding: 3px;
        font-size: 24px;
        background-color: #4451b3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Lorem Ipsum is simply dummy text</h1>
    </div>
  </body>
</html>

In the following example, the display of both the container and the text is set to "flex". For the container, we also use the justify-content property with the "center" value.

Example of setting a background-color for the text width with the display set to "flex":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
      }
      h1 {
        display: flex;
        padding: 3px;
        font-size: 24px;
        background-color: #000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Lorem Ipsum is simply dummy text</h1>
    </div>
  </body>
</html>

Or, you can also use the "block" value of the display property. Here too, a flex parent container is required.

Example of setting a background-color for the text width with the display set to "block":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
      }
      h1 {
        display: block;
        padding: 3px;
        font-size: 24px;
        background-color: #000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Lorem Ipsum is simply dummy text</h1>
    </div>
  </body>
</html>