CSS corners and background

hi guys!

I need to make a rounded corner "box" which can be assigned variable height depending of the text that will be in the box.

So, I have created 2 images: a top and a bottom image that are both 125 px high (the have to be that high because the box background is a gradient ) and have 4 rounded corners.

this is the css code that I have used:

#boxinpage{float: left; display: inline; width: 580px; margin-left: 5px; margin-top: 10px; }

.container-1 {
        background: #f3f3f3 url(images/bg/reviews/top.gif) top no-repeat;

    }

.container-2 {
        background: url(images/bg/reviews/bottom.gif) bottom no-repeat;
    }
.container-3 {
		padding: 23px 5px 10px 5px;
		
    }

Code (markup):

and this is the html:

<div id="boxinpage">
		<div class="container-1">
			<div class="container-2">
				<div class="container-3">

                                Content goes here....

                                </div>
                        </div>
                 </div>
</div>

Code (markup):

The problem is that the default background color that will have to fill the space between the two images is also appearing under the rounded corners and it looks horrible!

Could anyone tell me how could I make the background color to appear with some 10px lower from the top and bottom such that the corners will look ok?

Please take a look at the attached picture to know what I'm talking about

P.S. link to image: http://carconcepts.us/forum.jpg

Thanks,
Vlad

 

I've an headache, I can't think to much now but ...

Did you removed the background from the image? ;/
Also I see those are gif, do , save for web and hit Transparency, it should work ok.

Also, this might be a problem

background: #f3f3f3 url(images/bg/reviews/top.gif) top no-repeat;

Code (markup):

Just think a bit

My advice, change your method

Oh, btw, Sal'tare

 

use a program such a lview pro, photoshop, paint shop pro to make the background transparent the format is gif89a

 

You didn't understand me dudes... The images HAVE transparency but the problem is that the background color is showing up under the transparent corner...

 

I've updated the CSS code :

.container-1 {
        background: url(images/bg/reviews/top.gif) top no-repeat;
		padding: 23px 0px 0px 0px;

    }

.container-2 {
        background: url(images/bg/reviews/bottom.gif) bottom no-repeat;
		padding: 0px 5px 10px 5px;
    }
.container-3 {
		background: #f3f3f3;
		
    }

Code (markup):

and the html:

<div class="container-3">
			<div class="container-1">
				<div class="container-2">
                                Content goes here...
                                </div>
                        </div>
</div>

Code (markup):

But I still get the same end result....

PLEASE HELP

 

Isn't this exactly what transparency is supposed to do? If you don't want the color of container-3 to show underneath the transparent parts then don't set it.

 

Please take a look here: http://carconcepts.us/forum.jpg

I need to have the background color because that is the color that appears in the middle of the box and it allows the box to be stretched to X pixels.

The problem is that I don't know how to keep it from appearing for about 10 px at the top and bottom such that the transparent corners allow the background (the black one) to be visible.

 

What about this then?

.container-1 {
        background-image: url(images/bg/reviews/top.gif);
        background-position: top;
        background-repeat: no-repeat;
        background-color: #f3f3f3;        
        padding: 23px 0px 0px 0px;
}

.container-2 {
        background-image: url(images/bg/reviews/bottom.gif);
        background-position: bottom;
        background-repeat: no-repeat;
        padding: 0px 5px 10px 5px;
        background-color: #f3f3f3;
}
.container-3 {}

Code (markup):

 

That doesn't work...

 

Do you have an example online we could look at?

 

Sorry, I can't post the link.... Only the screen shot that I gave a link to....

 

Any more ideas guys?