Forums

pixlor

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: http://i183.photobucket.com/albums/x123/pixlor/misc/h2bg.png

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:
http://i183.photobucket.com/albums/x123/pixlor/misc/example.png

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


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

TheDoc

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

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

pixlor

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)
http://i183.photobucket.com/albums/x123/pixlor/misc/plain.png

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

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.
http://i183.photobucket.com/albums/x123/pixlor/misc/textmove.png

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:
http://i183.photobucket.com/albums/x123/pixlor/misc/mockup.png

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

chriscoyier

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.

pixlor

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


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

treehouse : what would you like to learn today?

Forums

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