Question

I have an box which is an image and I have text inside the image which will be geenrated dynamically.

Please look at the attached screenshot for more information.

How do I make sure that the image stretches when there is more text ?

.my-community-box{
        background: url('/assets/my-community-box.png') no-repeat !important;
        background-size: 100%;
        width: 287px;
        min-height: 474px;
        float: right;

        .my-community-details{
            background-color: @mild-gray;
            margin: 20px 10px 10px 10px;
            padding: 5px;

            ul{
                width: 250px;
                margin: 0 0 9px 0;
                li{

                }
            }

            a{
                color: @darker-green;
            }

            a:hover{
                text-decoration: none;
                color: @light-green;
            }
        }

Answer 1

Why not use a border?

.my-community-box{
        background: #F3F3F2;
        width: 287px;
        min-height: 474px;
        float: right;
        border: 3px solid #C5C3C3;
}

.my-community-box-wrap{
        border-left: 2px solid #C2E2A0;
        border-right: 2px solid #C2E2A0;
        float: right;
}

Demo: http://jsfiddle.net/AWXHr/