setting text background

Hello Friends,

I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we

place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved

edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused

how can i place it. Please help me!



This is the tag i am using



And This is the CSS code bellow,

If I understand correctly then I think what you need to do is to position the background image precisely using "background-position".

Like, background: url(../img/h1.jpg) no-repeat 0px 50px;

The two values at the end are the horizontal and vertical position of the background image. Play around with the values until you get the image positioned the way you want it.

Zwirko You didn't understood my question! What I mean that i have 3 images & i want to place them all bellow a single heading. Total width of background is 800px. First & third image is 50px wide which i don't want to repeat & place them at right & left corners while the second image is also 50px wide but i want to repeat it. means first & third makes corner & middle one makes the middle part of image.

You might try playing with something like this - a little different than what you want but could give you a good effect.

this looks good too, a simpler solution with less freedom (corners are not transparent) but real slick and it could do the trick in certain situations