Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS ? BG image on headings, when image is taller than headings?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26174
    pixlor
    Member

    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 :)

    #64390
    TheDoc
    Member

    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 */
    }
    #64398
    pixlor
    Member

    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 :)

    #64417
    Chris Coyier
    Keymaster

    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.

    #64412
    pixlor
    Member

    :) 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)
  • The forum ‘CSS’ is closed to new topics and replies.