Treehouse: Grow your CSS skills. Land your dream job.

Apply Background Color only on text

  • # December 14, 2011 at 5:53 am

    I’m changing the background of my headers, but there is this width problem that I’ve never met. For all the times that I’ve worked with CSS, I apply the background color and it only covers the part where there are text over. But this time, when I apply a background cover, it fills the entire row. I have no idea what to do now. The following is the CSS code for it:
    h1, h2, h3, h4, h5, h6 {
    margin: 4px 12px;
    padding: 2px;
    width: 115px;
    line-height: 1.1em;
    height: 1.2em;
    color: #fff;
    background: #0686c9;

    I have included the text shadow and gradient code because it’s kind of long. Please let me know if you need any further information.


    # December 14, 2011 at 5:55 am

    Edit: Remove the height from your css

    # December 14, 2011 at 6:23 am

    Isn’t it just because the header elements have a specific width of 115 pixels, so the background color would be applied to the entire element?

    # December 14, 2011 at 6:25 am

    Maybe I’m confused on what @angelazou is having trouble with. I’m not really understanding what they’re trying to do.

    # December 14, 2011 at 8:00 am

    Maybe that headers are filling the entire row? Did you try adding a display:block; in your css?

    # December 14, 2011 at 8:25 am

    display:block won’t do any difference, since the H1-H6 tags already are block-level elements by default, plus they have a fixed width.

    I’m also a little confused what he is having trouble with to be honest…!

    But here’s my guess….

    If the H1-H6 elements need to have a background color on the text only, don’t give it a specific width of 115px, cause then the color will be applied over that full width. However if there’s no width declared, it will be applied to the entire row, so you’ll have to use float:left;.

    # December 14, 2011 at 12:03 pm

    Put display:inline-block; in your css for the headers.

    # December 14, 2011 at 4:56 pm

    @cnwtx That will cause issues in IE7, I would just float them left. Unless of course IE7 support isn’t needed?

    # December 14, 2011 at 5:26 pm

    Floating isn’t going to (without setting a width) solve this, is it?

    # December 14, 2011 at 5:34 pm

    Yeah it will. Floating automatically wraps the element at the width of the content. Here is an example:

    # December 14, 2011 at 5:37 pm

    @angelazou To answer your question specifically, remove the fixed width and add float: left; and clear: left;, as shown in this example:

    # December 14, 2011 at 9:49 pm

    Sigh… I hate IE.

    # December 14, 2011 at 10:01 pm

    Me too, especially when the customer only uses IE. I saw something interesting with IE9. I have ‘height:’ on because I needed to apply some text show in IE9. But one minute it was there, and the next refresh it’s gone. I have no idea what’s going on.

    I visited the jsFiddle link provided, I will try and see if there is any difference. What I’m saying that when I try to apply a background color (it fills the entire row). I had to limit it to 115px so it doesn’t go over an entire row. But this is not a solution, because when I go to pages with post title (that are like 1 or 2 lines long), they are all stuck together because I limit the width to 115px.


    # December 14, 2011 at 10:03 pm

    Can you post a link to the issue? There must be something else overriding your styles.

    # December 14, 2011 at 10:36 pm

    Well, I used float:left and only part of the problem is solved. Because I used float:left, all the elements follow after the header. I tried clear: left and clear:both, none of them works.

    PS: I’m doing a local installation. But I can get you a screenshot and the content of the CSS if you’d like.

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.