<h1 style="background:white;color:blue;background-clip:text;">
Eli's Opinion Website
</h1>
The part that wont work is the clip part. Everything else works. I just need the background of the text to end when the text ends.
Based on your description, you might find display:inline
helpful.
.header {
display: inline;
background: lightblue;
color: blue;
}
<h1 class="header">
Eli's Opinion Website
</h1>
inline
The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. -- display
Depending on your context, you might consider display:inline-block
instead.
Also see What is the difference between display: inline and display: inline-block?
inline-block (legacy)
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).