Styling h2 with background

[Gizburdt]

Hi,

I’m working on a client project and I would like to do this:
https://www.dropbox.com/s/3drqs9f3r566nao/wb.jpg

The only thing wrapping the text is a h2. Does anyone know how to do this?

Thanks!

[Paulie_D]

As I recall this has come up before but I don’t think anyone ever found a simple solution.

[Gizburdt]

Haha ok, that’s why I posted it here, because I couldn’t fin a solution. Can you give me the link of the previous post?

[Paulie_D]

I tried searching but it’s such a vague subject…I’ll keep looking.

[Gizburdt]

It would be better without the spans, because the text is inserted by a user in a input field.

[robertallen]

I tried doing something like this…

div class=h2_wrapper
div class=h2_background /div
h2 Testing 1 2 3 /h2
/div

Forgive me, the code feature just doesn’t seem to work for me.

Then giving the h2_background a background color of #000 and an opacity of .5

Then I tried to absolute position the h2 element to be over it.

Didn’t work so hot, but I’m still learning.

[Paulie_D]

I’m pretty sure no-one ever came up with a solution that didn’t involve extra mark-up/HTML & or JS.

[Gizburdt]

Thanks guys!

[Nosenation]

Why can’t you just use something like that, without JS?:

h2 {
display: inline-block;
color: white;
text-align: center;
text-transform: uppercase;
background: rgba(0,0,0,0.7);
padding: 5px;
}

[Nosenation]

Ok, my fault. Didn’t saw line break :).

[Author]

Posts