1<p style="color: #ffffff;">Lorem ipsum...</p> <!-- text -->
2<p style="background-color: red;">Lorem ipsum...</p> <!-- background -->
3<h1 style="border: 2px solid #00ff00;">Lorem ipsum...</h1> <!-- border -->
4
5<!-- 3 ways to define colors -->
6<h1 style="background-color: rgb(255, 99, 71);">Lorem ipsum...</h1>
7<h1 style="background-color: #ff6347;">Lorem ipsum...</h1>
8<h1 style="background-color: hsl(9, 100%, 64%);">Lorem ipsum...</h1>
1Put the text in an inline element, such as a <span>.
2
3<h1><span>The Last Will and Testament of Eric Jones</span></h1>
4And then apply the background color on the inline element.
5
6h1 {
7 text-align: center;
8}
9h1 span {
10 background-color: green;
11}
12An inline element is as big as its contents is, so that should do it for you.
1Option 1
2display: table;
3
4no parent required
5h1 {
6 display: table; /* keep the background color wrapped tight */
7 margin: 0px auto 0px auto; /* keep the table centered */
8 padding:5px;font-size:20px;background-color:green;color:#ffffff;
9}
10<h1>The Last Will and Testament of Eric Jones</h1>