Background color, H1 element

[iDuvancho303]

How can I adjust the background color on my H1 element “Red Dead Redemption”

I would like for the background color just to cover the title.

Thanks in advance.

Red Dead Redemption

[Roma]

@iDuvancho303, so h1 is a block level element. You know what that means, right?

So what would you have to do so that you can style what’s between those two tags?

I’m guessing this is what you want the result to be.

[lasjorg]

So you want the width of the element background color to just be the width of the content?

• You can use display: inline-block on the element to make its width the size of the content. But that will mess with the centering (can be fixed of course).

• You can wrap the h1 text content inside a span and put the background-color on it instead (like what you did with first-letter). But that is an extra element and an extra selector you have to keep track of.

• So another option is to give the element max-width: max-content and then center it using auto margin.

I’m sure there are other ways of doing it but I think we should at least give you something.

[iDuvancho303]

Yes, That’s what I want the result to be. However, I would like to keep the with border around the text “-webkit-text-stroke-color: white;” I don’t see in the image you shared.

Thank you so much.

[iDuvancho303]

Correct, I would like the background color to just be the width of the text. inline-block did work but now I have the whole text on the left side of the page.

Thanks for your help.

[lasjorg]

@iDuvancho303

inline-block did work but now I have the whole text on the left side of the page.

As I said, it messes with the centering. You can give it a container and center it inside that. Or use the body and center everything (text-align: center will work for child elements that are inline-block elements) and then left or right align other elements you do not want to be centered.

But I also gave two other options as well. The last one is fairly clean.

h1 {
  max-width: max-content;
  margin: 0 auto;
  background: black;
  color: red;
}

[iDuvancho303]

That works!! thank you so much.