Colocar imagen de fondo fuera del borde que contiene div

Question

Estoy intentando establecer una imagen de fondo fuera del div que contiene.

<div class="expandable">Show Details</div> 

.expandable 
{ 
    background: transparent url('./images/expand.gif') no-repeat -20px 0px; 
} 

por lo que la imagen "expandir" debería aparecer básicamente a la izquierda del div.

No puedo hacer que esto funcione, la imagen no se muestra cuando se coloca fuera de los bordes del contenedor. No estoy seguro de si hay un truco de CSS que me falta, o si tiene algo que ver con el diseño de mi página (el div "expandible" está anidado en varios otros divs).

¿Es posible hacer esto? ¿Algún consejo?

Editar: aquí hay una jsFiddle mostrando el problema: link

Answer 1

Vas a tener que poner la imagen de fondo dentro de un elemento separado. Las posiciones de la imagen de fondo no pueden colocar la imagen fuera del elemento al que se aplican.

edición su pregunta trotó mi memoria y fui y verifiqué las especificaciones de CSS. De hecho, se puede establecer un atributo CSS "de fondo" que ancla el fondo a la ventana gráfica en lugar del elemento. Sin embargo, es buggy o roto en el IE, que es por lo que lo tienes sentado en la plataforma "no use" en mi cabeza :-)

edición — Tenga en cuenta que esta respuesta es a partir de 2010, y más reciente (y, lo que es más importante, ampliamente respaldado) existen capacidades de CSS en 2016.

Answer 2

No puede hacer esto exactamente como quiere, pero hay una solución bastante sencilla. Se puede poner otro div interior de .expandable como:

<div class="expandable">Show Details<div class="expandable-image"></div></div> 

A continuación, el CSS sería algo como:

.expandable{ position:relative; } 
.expandable-image{ 
    position:absolute; top:0px; left:-20px; 
    width:<width>px; height:<height>px; 
    background: url('./images/expand.gif') no-repeat; 
} 

Answer 3

Dependiendo de los detalles de su situación, que podría ser capaz de salirse con CSS3 de border-image-* rules . Por ejemplo, los utilicé efectivamente para colocar "botones de búsqueda ficticios" en la fila de filtros de un widget CGridView en yii (hacer clic en cualquier lugar fuera de los cuadros de entrada del filtro disparará la llamada ajax, pero estos "botones" le dan al usuario algo intuitivo que hacer) No me ha valido la subclase del widget CGridColumn para hackear el html en su método renderFilterCell() * - Quería una solución de CSS pura.

.myclass .grid-view .items { 
    border-collapse: separate ; 
    } 

    .myclass .grid-view .filters td + td { 
    border-image-source: url("/path/to/my/img_32x32.png"); 
    border-image-slice: 0 0 0 100%; 
    border-image-width: 0 0 0 32; 
    border-image-outset: 0 0 0 40px; 
    border-width: 1px; 
    } 

    .myclass .grid-view .filters input { 
    width: 80%; 
    } 

Hay un poco de un truco que participan en los valores de la imagen a ancho del borde - que el 32 es un multiplicador no una longitud (no poner px) de la unidad utilizada en border-width (es decir, 1px). El resultado son botones falsos en las primeras n-1 columnas de la vista de cuadrícula. En mi caso, no necesité nada en la última columna porque es una CButtonsColumn que no tiene un cuadro de filtro. De todos modos, espero que esto ayude a las personas que buscan una solución de CSS pura & # x1F600; :-D

* No mucho después de escribir esto, descubrí que puedo concatenar el código de una imagen en la propiedad 'filtro' de la matriz utilizada para construir el CGridColumn, por lo que mi razonamiento resulta ser irrelevante. Además parece que hay un problema (en Firefox, de todos modos) con la repetición de imagen de borde forzada a estirar incluso cuando se especifica espacio.Aún así, tal vez esto podría ser útil para alguien & # x1F615; : - \

Answer 4

Sé que este es un hilo antiguo, pero solo quería actualizarlo y agregar que esto es posible utilizando pseudo elementos CSS.

.class:before { 
    content: ""; 
    display: inline-block; 
    width: {width of background img}; 
    height: {height of background img}; 
    background-image: url("/path/to/img.png"); 
    background-repeat: no-repeat; 
    position: relative; 
    left: -5px; //adjust your positioning as necessary 
}