css negative background position or alternatives?

I have created a content div that holds list items, the div is slightly curved and I 开发者_如何转开发was to position a background image on this that appears at the bottom left of the div, the div curently has a black box image 40x40, basically I want 20px of this image to be outside the bottom of the content div, can this be done by just using background positioning?

<div id="continent-pl">
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
    </div>

div#continent-pl, .flip{
        margin:0px;
        padding:5px;
        text-align:center;
        background:#ebebeb;
        /*border:solid 1px #c3c3c3;*/
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    div#continent-pl{
        height:120px;
        margin: 0 23px 20px;
        width: 880px;
        display:none;       
        border-bottom: 1px solid #c5c5c5;
        /*background: #ebebeb url(../images/footer-arrow.jpg) no-repeat 0 100%;*/
        background: #ebebeb url(http://dummyimage.com/40/000/fff.gif) no-repeat 0 100%;
        position: relative;
    }

    #continent-pl div{
        float: left; 
        width: 200px; 
        margin-right: 20px;
    }

Kyle

---

You won't be able to achieve what you're trying to achieve using the background-image property because backgrounds cannot extend beyond the content box of an element.

You have a few options.

Option 1 - View Demo
You could just add another element inside #continent-pl and then absolutely position that to the bottom left corner.

Option 2 - View Demo
You could do the same thing with an image tag inside #continent-pl and absolutely position it.

Option 3 - View Demo
If you want an option that doesn't add any non-semantic html you could use the content:after CSS property which actually creates generated content that you can style. Note this technique does not work in IE6 or IE7.

---

Unsure as to your exact requirements, but you can move the image using background-position. In your example you would move it to background-position: 0 110px.

For this you need to know the height of the div and the padding. The div height here is 120px and the padding is 5px top and bottom, so the total size is 130px. Subtract 20px, the height you want to show above the bottom of the div, and you get 110px.

See DEMO

Don't know if that's what you are after but there you go.