Grow your CSS skills. Land your dream job.

Styling h2 with background

  • # November 21, 2012 at 8:00 am

    Hi,

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

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

    Thanks!

    # November 21, 2012 at 8:05 am

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

    # November 21, 2012 at 8:13 am

    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?

    # November 21, 2012 at 8:16 am

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

    # November 21, 2012 at 8:21 am

    Would you be able to use spans inside the h2?

    http://codepen.io/andyunleashed/pen/ArHGv

    # November 21, 2012 at 8:24 am

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

    # November 21, 2012 at 8:26 am

    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.

    # November 21, 2012 at 8:28 am

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

    # November 21, 2012 at 8:40 am

    How about this: http://codepen.io/andyunleashed/pen/ArHGv

    Using JQuery – found a neat plugin by Jeffrey Way (https://github.com/JeffreyWay/jquery.styleWords)

    Then used another bit I found on stackoverflow to style the last word.

    Doesn’t change anything the user puts in but manipulates the outputted HTML.

    # November 21, 2012 at 9:42 am

    Thanks guys!

    # November 21, 2012 at 10:00 am

    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;
    }

    # November 21, 2012 at 10:03 am

    @nosenation – Because he needs there to be a break in the middle. If you just add in a usual br (which he can’t do) it just extends the background without a gap between the lines.

    # November 21, 2012 at 10:12 am

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".