O que eu quero é que o plano de fundo verde fique logo atrás do texto, não seja 100% da largura da página. Aqui está meu código atual:

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

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

Coloque o texto em um elemento embutido , como a <span>.

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

E, em seguida, aplique a cor de fundo no elemento embutido.

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

Um elemento embutido é tão grande quanto seu conteúdo; portanto, isso deve ser feito por você.

Opção 1

display: table;

• nenhum pai é necessário

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>

violino

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

Mais

display: table diz ao elemento para se comportar como uma tabela HTML normal faria.

Mais sobre isso em w3schools , CSS Tricks e aqui

opção 2

display: inline-flex;

• requer text-align: center;no pai

.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>

Opção 3

display: flex;

• requer um contêiner pai flexível

.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>

sobre

Provavelmente, o guia mais popular do Flexbox e um que eu refiro constantemente é o CSS Tricks

Opção 4

display: block;

• requer um contêiner pai flexível

.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>

Opção 5

::before

• requer digitar palavras no arquivo css (não muito prático)

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>

violino

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

sobre

Mais sobre pseudo-elementos css :: before and :: after no CSS Tricks e pseudo-elementos em geral no w3schools

Opção 6

display: inline-block;

• centrado com position: absoluteetranslateX

• requer um position: relativepai

.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>

sobre

Mais sobre centralização com transform: translate();(e centralização em geral) neste artigo de truques do CSS

Opção 7

text-shadow: e box-shadow:

• não o que o OP estava procurando, mas talvez útil para outras pessoas que estão aqui.

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>

violino

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

Mais opções

Existem algumas outras maneiras de fazer isso combinando as diferentes opções de exibição e métodos de centralização acima.

Um pouco tarde para o jogo, mas pensei em adicionar meus 2 centavos ...

Para evitar adicionar a marcação extra de uma extensão interna, você pode alterar a <h1>propriedade display de blockpara inline(catch é necessário garantir que os elementos após os <h1>elementos do bloco sejam).

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;
}

Resultado

JSFIDDLE http://jsfiddle.net/J7VBV/

Um truque muito simples para fazer isso é adicionar uma <span>tag e adicionar a cor de fundo a ela. Ele terá a aparência que você deseja.

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

E CSS

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

PORQUE?

<span> em uma tag de elemento embutido, para que ela se estenda apenas sobre o conteúdo que está fingindo o efeito.

EDIT: a resposta abaixo se aplica na maioria dos casos. No entanto, o OP mencionou mais tarde que eles não podiam editar nada além do arquivo CSS. Mas deixará isso aqui para que possa ser útil para outras pessoas.

A principal consideração que outros estão negligenciando é que o OP afirmou que não pode modificar o HTML.

Você pode direcionar o que você precisa no DOM e adicionar classes dinamicamente com javascript. Em seguida, estilize conforme necessário.

Em um exemplo que criei, direcionei todos os <p>elementos com jQuery e envolvi-o com uma div com uma classe "coloured"

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

Então, no meu CSS, direcionei o <p>e dei a cor de fundo e mudei paradisplay: inline

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

Ao definir a exibição como embutida, você perde parte do estilo que herdaria normalmente. Portanto, certifique-se de direcionar o elemento mais específico e estilizar o contêiner para o restante do seu design. Isto é apenas um ponto de partida de trabalho. Use com cuidado. Demonstração de trabalho no CodePen

h1 é um elemento no nível do bloco. Você precisará usar algo como span em vez disso, pois é um elemento de nível inline (ou seja: não abrange toda a linha).

No seu caso, eu sugeriria o seguinte:

style.css

.highlight 
{
   background-color: green;
}

html

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

Como as outras respostas observam, você pode adicionar um background-colora um<span> redor do seu texto para que isso funcione.

No caso em que você tem line-height, você verá lacunas. Para corrigir isso, você pode adicionar um box-shadowpouco de crescimento ao seu período. Você também deseja box-decoration-break: clone;que o FireFox o processe corretamente.

Edição: Se você está tendo problemas no IE11 com a sombra de caixa, tente adicionar um outline: 1px solid [color];também para o IE.

Aqui está o que parece em ação:

.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>

Tente remover o centro de alinhamento de texto e centralize <h1>ou <div>o texto reside.

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

pode usar a marca html5 dentro da marca de parágrafo e cabeçalho.

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

Você pode usar a <mark>tag HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Tente este:

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);
}

Por favor note que calc não é compatível com todos os navegadores :) Só quero ser consistente com o alinhamento na postagem original.

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

Você deve mencionar a largura da tag h1.

seu css será assim

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

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.
  }
}

Demonstração no codepen

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; 
}