How do I create a liquid container with transparent PNG border images?
Posted on 2009-03-30
I am trying to create a container that uses transparent PNG images for the borders. I have followed numerous tutorials on the net but I can't quite get it to work how I want. I think the problem is that I am using transparent images for the borders, where as the tutorials I have seen expect the images to be solid - i.e. the background the container sits on it a single colour.
I'm still learning CSS so I might be missing a concept or 2 here but could someone provide some code on how this might be done?
Essentially what I would like to be able to do is have a resizable (liquid) container that uses transparent PNG images for borders. I need the border images to be transparent as the background the container sits on is a gradient and it needs to be resizable as I will be using jQuery to animate it.
One of the main problems I seem to be having is that I need the container to be able to resize depending on the content that is inside it. So not only do I need to be able to resize the whole thing with jQuery but it needs to resize dynamically depending on the amount of content inside it.
I have attached an image of the end result I am trying to create. If you need anymore info or would like to see what I have tried so far then let me know.