css posición de fondo negativa o alternativas?

He creado un div de contenido que contiene elementos de la lista, el div está ligeramente curvado y tenía que colocar una imagen de fondo en esto que aparece en la parte inferior izquierda del div, el div actualmente tiene una imagen de caja negra de 40x40, básicamente quiero 20px de esta imagen para estar fuera de la parte inferior del div de contenido, ¿se puede hacer simplemente usando el posicionamiento en segundo plano?

<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

preguntado el 10 de mayo de 11 a las 14:05

"... el div está ligeramente curvado ..." No estoy seguro de lo que eso significa. -

2 Respuestas

No podrá lograr lo que está tratando de lograr con el background-image propiedad porque los fondos no pueden extenderse más allá del cuadro de contenido de un elemento.

Tienes pocas opciones.

Opción 1 - Ver demo
Podrías simplemente agregar otro elemento dentro #continent-pl y luego colóquelo absolutamente en la esquina inferior izquierda.

Opción 2 - Ver demo
Podrías hacer lo mismo con una etiqueta de imagen dentro #continent-pl y posicionarlo absolutamente.

Opción 3 - Ver demo
Si desea una opción que no agregue ningún html no semántico, puede usar el content:after Propiedad CSS que en realidad crea contenido generado al que puede aplicar estilo. Nota: esta técnica no funciona en IE6 o IE7.

contestado el 10 de mayo de 11 a las 23:05

No estoy seguro de sus requisitos exactos, pero puede mover la imagen usando background-position. En su ejemplo, lo movería a background-position: 0 110px.

Para esto, necesita conocer la altura del div y el relleno. La altura del div aquí es de 120px y el relleno es de 5px arriba y abajo, por lo que el tamaño total es 130px. Reste 20px, la altura que desea mostrar sobre la parte inferior del div, y obtendrá 110px.

Vea DEMO

No sé si eso es lo que buscas, pero ahí lo tienes.

contestado el 10 de mayo de 11 a las 18:05

Hola, lo siento, en realidad quiero colocar la imagen de fondo en la parte superior del borde inferior con aproximadamente 20 px de la imagen dentro del cuadro - styler

¿No es eso lo que mostré arriba? ¿20px de la imagen se muestra dentro de la caja? - otro Shrubery

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.