<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; }
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; }
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> .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>
.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>
.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>
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> Jones</h1>
.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>
<h1> <span>The Last Will and Testament of Eric Jones</span> </h1> h1 { text-align: center; } h1 span { background-color: green; }
http://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css