css - toda - hacer que una imagen se adapte a un div

¿Puede una imagen de fondo ser más grande que la div misma?

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 mide aproximadamente 800x600 px, y quiero que se ubique 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 el div. ¿Es posible hacer que eso suceda?

overflow:visible no hace el trabajo!

Answer 1

En realidad, no: la imagen de fondo está limitada 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, sin embargo, y tener ese desbordamiento en su lugar.

Answer 2

Hay un truco muy fácil. Establezca el relleno de ese div en un número positivo y el margen en negativo

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

Answer 3

Mencionas que ya tienes una imagen de fondo en el body .

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

Answer 4

No creo que puedas hacer que una imagen de fondo desborde su div. 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 5

No, no puedes.

Pero como una solución sólida, sugeriría clasificar esa primera div como position:relative y usar 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 te olvides de agregar contenido a ese nuevo elemento. Aquí hay un ejemplo:

div {
  position: relative;
}    

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

Nota: si desea que esté ''encima'' del div principal, use div::after en div::after lugar.

Answer 6

Puede usar un elemento css3 psuedo como se muestra en este artículo

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

Answer 7

Usar 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, tenga en cuenta los problemas de soporte. Compruebe ¿Puedo utilizar: http://caniuse.com/#search=background-size

Answer 8

Use la propiedad trasform: scale (1.1) para agrandar la imagen de bg, muévala hacia arriba con la posición: relative; arriba: -10px;

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url(''image.svg'');
    }
}

Answer 9

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