Grow your CSS skills. Land your dream job.

? BG image on headings, when image is taller than headings?

  • # September 18, 2009 at 9:11 pm

    I’m too new to CSS to understand if this is possible.

    I would like to use this image as a background image for headings: [img]http://i183.photobucket.com/albums/x123/pixlor/misc/h2bg.png[/img]

    It’s taller than the headings would be, and ideally I’d like to move the image up and to the left. I’d also like the paragraph text that follows the heading to not be pushed down, but have the text over the image, if necessary.

    I’ve tried just putting the image as a background for the heading element; it is cut off at the bounds of the heading.

    I’ve tried setting height and width, but then the paragraph text gets pushed down. Something like this:
    [img]http://i183.photobucket.com/albums/x123/pixlor/misc/example.png[/img]

    I’ve tried various combinations of things, but basically I don’t know what I’m doing. :P

    Code:
    #content h2 {
    background:url(images/h2bg.png) no-repeat;
    /*background-position: -30px -60px; */ moves image, but is cropped at heading boundaries
    /* overflow: visible;*/
    width: 115px;
    height: 75px;
    }

    Is there a way to produce the effect I want?

    Thanks :)

    # September 18, 2009 at 9:24 pm

    Completely untested, just off the top of my head, try this:

    Code:
    #content h2 {
    background: url(images/your-background-image.jpg) no-repeat #999999; /* don’t put 999999, put the color that is in the bg of the image */
    padding-top: ##px; /* this will push the text down from the top */
    padding-left: ##px; /* this will push the text right from the left */
    min-height: ##px; /* height of the image */
    height: auto !important; /* ie6 */
    height: ##px; /* height of image, also for ie6 */
    }
    # September 19, 2009 at 12:19 am

    Thank you for your answer, but that doesn’t do what I want. It still pushes the text down and I can’t move the image up and to the left.

    Here’s my heading and paragraph text without the image (screen capture)
    [img]http://i183.photobucket.com/albums/x123/pixlor/misc/plain.png[/img]

    Here’s my heading and paragraph text with the image behind the heading; note how the paragraph text is pushed down:
    [img]http://i183.photobucket.com/albums/x123/pixlor/misc/bgimg.png[/img]

    Here’s with padding added to move the text where I want with respect to the image, but the heading text moves and the paragraph text is still pushed down.
    [img]http://i183.photobucket.com/albums/x123/pixlor/misc/textmove.png[/img]

    Here’s what I’d like to have (graphics mockup) – paragraph text in the same position relative to the heading text and the background image moved up and to the left with respect to the heading text:
    [img]http://i183.photobucket.com/albums/x123/pixlor/misc/mockup.png[/img]

    Is this possible with a background image on the heading? Or do I need to do something else? (And if so, what would work well?)

    Thanks :)

    # September 19, 2009 at 11:01 am

    Try using what TheDoc provided, but then also add position:relative and use left: -20px; (adjust as needed) to nudge the header back to where you want it.

    # September 19, 2009 at 11:27 am

    :) That fixes the heading and image, thank you!

    Now…is there any way to close the gap between the heading and the paragraph text? I tried giving the first paragraph a negative margin, but it didn’t move. Would that be because of the height/min-height on the heading?

    Code:
    #content h2 {
    background: url(images/h2bg.png) no-repeat #fbf8f2;
    padding-top: 30px; /* this will push the text down from the top */
    padding-left: 60px; /* this will push the text right from the left */
    left: -60px;
    position: relative;
    min-height: 75px; /* height of the image */
    height: auto !important; /* ie6 */
    height: 75px; /* height of image, also for ie6 */
    }

    #content p {
    margin: 0 0 1.5em 25px;
    }

    #content h2 p {
    margin: -75px 0 1.5em 25px;
    }

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

You must be logged in to reply to this topic.

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