Question

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 40×40, 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

Answer 1

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.