How do I make the background color of my text display gaps from my text's line spacing?

Asked Mar 07 '22 at 18:03

Active Mar 07 '22 at 18:09

Viewed 25 times

I am trying to display a background color for my text but I would like it to include gaps based on the text's line spacing.

Here is what I am trying to achieve:

And this is what I currently have:

How do I fix this?? Any input is greatly appreciated :)

<body>
    <header>
        <div class="backgroundImg">
            <img src="assets/background.jpg" alt="Land Rover parked on snowy landscape.">
        </div>
        <div class="headerText">
            <h1>
                <span class="action">ACTION</span>
                <span class="horizon">Horizon</span>
            </h1>
            <span>
                <p>It's adventure time as we know it!</p>
            </span>
        </div>
    </header>

</body>

This is my HTML code ^ as you can see, I am trying to target the and

in the .headerText div

And here is my current CSS:

p {
    font-size: 3.5rem;
    color: white;
    width: 45%;
    background-color: cornflowerblue;
}

(I edited this post to include my HTML and CSS code)

edited Mar 07 '22 at 18:09

asked Mar 07 '22 at 18:03

daydreamnation1011

1

@Roko I have added in my HTML and CSS to this post for more clarity – daydreamnation1011 Mar 07 '22 at 18:09
You have invalid markup! `
` and other BLOCK-level elements are not allowed inside an INLINE ``.
– Roko C. Buljan Mar 07 '22 at 18:13

How do I make the background color of my text display gaps from my text's line spacing?

0 Answers0