How do I set a background-color for the width of text, not the width of the entire element, using CSS?

HtmlCss

Html Problem Overview

What I want is for the green background to be just behind the text, not to be 100% of the page width. Here is my current code:

h1 { 
    text-align: center; 
    background-color: green; 
}


<h1>The Last Will and Testament of Eric Jones</h1>

Html Solutions

Solution 1 - Html

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

Solution 2 - Html

Option 1

display: table;

  • no parent required

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}


<h1>The Last Will and Testament of Eric Jones</h1>

fiddle

http://jsfiddle.net/J7VBV/293/

more

display: table tells the element to behave as a normal HTML table would.

More about it at w3schools, CSS Tricks and here

Option 2

display: inline-flex;

  • requires text-align: center; on parent

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}


<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Option 3

display: flex;

  • requires a flex parent container

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}


    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

about

Probably the most popular guide to Flexbox and one I reference constantly is at CSS Tricks

Option 4

display: block;

  • requires a flex parent container

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}


<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Option 5

::before

  • requires entering words in css file (not very practical)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}


<h1></h1>

fiddle

http://jsfiddle.net/J7VBV/457/

about

More about css pseudo elements ::before and ::after at CSS Tricks and pseudo elements in general at w3schools

Option 6

display: inline-block;

  • centering with position: absolute and translateX

  • requires a position: relative parent

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}


  <h1>The Last Will and Testament of Eric Jones</h1>

about

More on centering with transform: translate(); (and centering in general) in this CSS tricks article

Option 7

text-shadow: and box-shadow:

  • not what the OP was looking for but maybe helpful to others finding their way here.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}


<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

fiddle

https://jsfiddle.net/Hastig/t8L9Ly8o/

More Options

There are a few other ways to go about this by combining the different display options and centering methods above.

Solution 3 - Html

A little late to game but thought I would add my 2 cents...

To avoid adding the extra mark-up of an inner span you could change the <h1> display property from block to inline (catch is you would have ensure the elements after the <h1> are block elements.

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

Result
enter image description here
JSFIDDLE http://jsfiddle.net/J7VBV/

Solution 4 - Html

As the other answers note, you can add a background-color to a <span> around your text to get this to work.

In the case where you have line-height though, you will see gaps. To fix this you can add a box-shadow with a little bit of grow to your span. You will also want box-decoration-break: clone; for FireFox to render it properly.

EDIT: If you're getting issues in IE11 with the box-shadow, try adding an outline: 1px solid [color]; as well for IE only.

Here's what it looks like in action:

example of the css technique

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}


<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

Solution 5 - Html

A very simple trick to do so, is to add a <span> tag and add background color to that. It will look just the way you want it.

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1>

And CSS

h1 { text-align: center; }
h1 span { background-color: green; }

###WHY?

<span> tag in an inline element tag, so it will only span over the content faking the effect.

Solution 6 - Html

EDIT: the answer below would apply in most cases. OP however later mentioned that they could not edit anything other than the CSS file. But will leave this here so it may be of use to others.

enter image description here

The main consideration that others are neglecting is that OP has stated that they cannot modify the HTML.

You can target what you need in the DOM then add classes dynamically with javascript. Then style as you need.

In an example that I made, I targeted all <p> elements with jQuery and wrapped it with a div with a class of "colored"

$( "p" ).wrap( "<div class='colored'></div>" );

Then in my CSS i targeted the <p> and gave it the background color and changed to display: inline

.colored p {
    display: inline;
    background: green;
}

By setting the display to inline you lose some of the styling that it would normally inherit. So make sure that you target the most specific element and style the container to fit the rest of your design. This is just meant as a working starting point. Use carefully. Working demo on CodePen

Solution 7 - Html

h1 is a block level element. You will need to use something like span instead as it is an inline level element (ie: it does not span the whole row).

In your case, I would suggest the following:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>

Solution 8 - Html

Try removing the text-alignment center and center the <h1> or <div> the text resides in.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

Solution 9 - Html

can use html5 mark tag within paragraph and heading tag.

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

Solution 10 - Html

You can use the HTML5 <mark> tag.

HTML:

<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>

CSS:

mark
{
    background-color: green;
}

Solution 11 - Html

Easily :

<p>lorem ibsum....</p>

with styles :

p{
    background-color: #eee;
    display: inline;
}

the background sets to the whole size of the element; revise the diffrence between inline elements and block elements from here

Solution 12 - Html

Try this one:

h1 {
    text-align: center;
    background-color: green;
    visibility: hidden;
}

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

Please note that calc is not compatible to all browsers :) Just want to be consistent with the alignment in the original post.

https://jsfiddle.net/richardferaro/ssyc04o4/

Solution 13 - Html

You have to mention the width of the h1 tag..

your css will be like this

h1 {
text-align: center;
background-color: green;
width: 600px;
 }

Solution 14 - Html

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1>

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.

  
  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

Demo on codepen

Solution 15 - Html

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}

Solution 16 - Html

The Last Will and Testament of Eric Jones

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Unmount the directory which is mounted by sshfs in Mac

MacosSshfsUmount

Next Solution:

Call apply-like function on each row of dataframe with multiple arguments from each row

RDataframe

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHithere PaperbagView Question on Stackoverflow
Solution 1 - HtmlBalusCView Answer on Stackoverflow
Solution 2 - HtmlHastig ZusammenstellenView Answer on Stackoverflow
Solution 3 - HtmlDanView Answer on Stackoverflow
Solution 4 - HtmlCobertosView Answer on Stackoverflow
Solution 5 - HtmlStarxView Answer on Stackoverflow
Solution 6 - HtmlJGallardoView Answer on Stackoverflow
Solution 7 - HtmlAndyView Answer on Stackoverflow
Solution 8 - HtmlAgnosticDevView Answer on Stackoverflow
Solution 9 - HtmlRavi VishwakarmaView Answer on Stackoverflow
Solution 10 - HtmlDan BrayView Answer on Stackoverflow
Solution 11 - HtmlAhmed MansourView Answer on Stackoverflow
Solution 12 - HtmlRichard FeraroView Answer on Stackoverflow
Solution 13 - HtmlramyaView Answer on Stackoverflow
Solution 14 - HtmlTiiGRUSView Answer on Stackoverflow
Solution 15 - HtmlLuckyThe4thJrView Answer on Stackoverflow
Solution 16 - HtmlAnish Kumar GuptaView Answer on Stackoverflow