CSS: The background color and overlapping rows

Blog/CSS3 · 2013-05-22 · element background result h1 facilisis metus feugiat tempor tincidunt erat consectetur adipiscing elit amet consectetur adipiscing sit amet consectetur dolor sit amet

The goal is to achieve a background of the text inside an inline element.

Alt text

I started with a simple html like:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor tincidunt erat, et facilisis metus feugiat at.

And the following CSS:

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: 30px;
    font-size: 30px;
    padding: 10px;
    background: #7f7f7f;
    color: #FFF;
}

Because the h1 tag by default is a block element the background takes the whole area

Alt text

So, I made my title inline element with display: inline and the result is:

Alt text

The solution was to wrap the text inside the title in a span element.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor tincidunt erat, et facilisis metus feugiat at.

And add one more style about the new element:

h1 span {
    position: relative;
}

Here is the final result:

Yes, I know that the result is no as good as my image made in photoshop, but you can play with line-height and font-size and will get closer.