¿Puede una imagen de fondo ser más grande que el div mismo?

Question

Tengo una div de pie de página con un ancho del 100%. Tiene aproximadamente 50 px de alto, según su contenido.

¿Es posible darle a ese #footer una imagen de fondo que se desborda de esta div?

La imagen es de aproximadamente 800x600px, y quiero que se coloque en la esquina inferior izquierda del pie de página. Debería funcionar algo así como una imagen de fondo para mi sitio web, pero ya he establecido una imagen de fondo en mi cuerpo. Necesito otra imagen colocada en la esquina inferior izquierda de mi sitio web y el #footer div sería perfecto para eso.

#footer { 
    clear: both; 
    width: 100%; 
    margin: 0; 
    padding: 30px 0 0; 
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed; 
} 

La imagen se establece en el pie de página, sin embargo, no desborda la div. ¿Es posible hacer que eso suceda?

overflow:visible no hace el trabajo!

Answer 1

No creo que pueda hacer que una imagen de fondo se desborde. Las imágenes colocadas en etiquetas de imagen pueden desbordar su div principal, pero las imágenes de fondo están limitadas por el div del que forman el fondo.

Answer 2

No realmente: la imagen de fondo está delimitada por el elemento al que se aplica, y las propiedades de desbordamiento solo se aplican al contenido (es decir, marcado) dentro de un elemento.

Puede agregar otro div en su div de pie de página y aplicar la imagen de fondo a eso, y tener ese desbordamiento en su lugar.

Answer 3

This could help. Requiere que la altura del pie de página sea un número fijo. Básicamente, usted tiene un div dentro de la div pie de página con su contenido normal, con position: absolute, y luego la imagen con position: relative, un negativo z-index para que se mantenga "por debajo" de todo, y un valor negativo top de la altura del pie de página, menos la altura de la imagen (en mi ejemplo, 50px - 600px = -550px). Probado en Chrome 8, FireFox 3.6 e IE 9.

Answer 4

Menciona que ya tiene una imagen de fondo en body.

Usted podría establecer que la imagen de fondo en html, y la nueva en body. Esto, por supuesto, dependerá de su diseño, pero no necesitaría usar su pie de página para ello.

Answer 5

Hay un truco muy fácil. Establecer el relleno de ese div a un número positivo y el margen de NEGATIV

#wrapper { 
    background: url(xxx.jpeg); 
    padding-left: 10px; 
    margin-left: -10px; 
} 

Answer 6

Se puede utilizar un elemento de CSS3 pseudo como se muestra en este artículo

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

Answer 7

No, no se puede.

Pero como una solución sólida, sugiero que se clasifique ese primer div como position:relative y use div::before para crear un elemento subyacente que contenga su imagen. Clasificado como position:absolute puede moverlo a cualquier lugar en relación con su div inicial.

No olvide agregar contenido a ese nuevo elemento.He aquí algunos ejemplos:

div { 
    position: relative; 
}  

div::before { 
    content: ""; /* empty but necessary */ 
    position: absolute; 
    background: ... 
} 

Nota: si usted quiere que sea 'en la parte superior' de la div padre, utilice div::after lugar.

Answer 8

El uso de la cubierta del tamaño de fondo funcionó para mí.

#footer { 
    background-color: #eee; 
    background-image: url(images/bodybgbottomleft.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    clear: both; 
    width: 100%; 
    margin: 0; 
    padding: 30px 0 0; 
} 

obviamente, será consciente de problemas de soporte técnico, cheque puedo utilizar: http://caniuse.com/#search=background-size