PNG box?

[papercut]

Is it possible to make a box with fixed width with png background that is bulletproofed for enlarging the text that it encloses? I have a header that is three curved and one square corner that needs to be semi-transparent with three text boxes in it over a container with another background and need to blend them. I've tried some things but nothing seems to work :(
Thanks in advance!

the html code:

<div id="container">
<div id="header">
<div id="logo">
<p><a href=""><img src="logo.jpg" alt="" border="0"/></a></p>
</div>
<div id="contentcenter">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>text</p>
</div>
<h3>text lines</h3>
</div>
</div>

[WebJoel]

A background-image, or a background-color? Either I suppose? I have a little helper that makes the opacity work on all browsers. I'm on the Linux machine this morning, -I'll switch over to XP... brb

back:

Something like this:div.this {
background-color:#3F352A;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: .6;
filter: alpha(opacity=60);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);where the DIV you want to have an opaque background has class="this" . Is this what you mean?
an image can be treated the same way:div.this img {
background-color:#3F352A;
opacity: 0.6;
-moz-opacity: .6;
-khtml-opacity: .6;
filter: alpha(opacity=60);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);

[papercut]

Transparency alone is not a problem. I need the box (with the png background) to have three curved corners and one square. The box is fixed in width but when it's contents grow the box should stretch to enclose them vertically.

[KDLA]

Here's something I've used:

#wrapper {margin: auto; padding: 0; text-align: left; width: 58em; display: block; background: #203984; color: #000;}

#top-right {background: url(../images/corner.gif) no-repeat top right; float: right; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#top-left {background: url(../images/corner.gif) no-repeat top left; float: left; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#bot-right {clear: right; background: url(../images/corner.gif) no-repeat bottom right; float: right; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
#bot-left {clear: left; background: url(../images/corner.gif) no-repeat bottom left; float: left; margin: 0; padding: 0; width: 40px; height: 17px; display: block;}
.space {min-height: 17px; line-height: 17px;}

<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
<div class="space">&nbsp;</div>
...
<div id="bot-left"></div><div id="bot-right"></div>
<div class="space">&nbsp;</div>
</div><!-- End Wrapper -->
</body>
</html>


When the text size is increased, the box stretches vertically.
I use one image: http://www.letky.org/images/corner.gif
If you leave the background attribute out of the corner styles, you'll get the straight corner.

Oh, you can see the page here (http://www.letky.org/).

KDLA

[papercut]

what I mean is something like
http://www.cssplay.co.uk/boxes/three_cornered.html
with one square corner and three curved but instead with a semi-transparent png as background on the whole box. is there a way?

[WebJoel]

what I mean is something like
http://www.cssplay.co.uk/boxes/three_cornered.html
with one square corner and three curved but instead with a semi-transparent png as background on the whole box. is there a way?
That would seem to be exactly what you want, and using the fine code at cssplay and the opacity filter I provided earlier, you should have this. Can I assume that you'd like someone to write this up and post the refined code? I'm not being snide, -I assume that this is a bit much for you and would like to have a working foot-noted copy-able model to use.

I'll have a go at it in a little bit, -see if I can put something together. :)

[papercut]

The thing is Stu is using a background-color for his example and I need a kind of a complicated png image. In this case I didn't find a solution that's why I'm here asking if anyone can help me.

[JackAndrews]

Here's a solution for round corners that requires no images. Pretty cool. Only caveat might be the js load time, but it also has a lite version that is compressed js. It's also GNU. http://www.curvycorners.net