¿Puede la imagen de fondo extenderse más allá de las fronteras de div?

Question

¿Puede la imagen de fondo extenderse más allá de las fronteras de div? ¿Desbordamiento: visible se aplica a esto?

Answer 1

No, un fondo no puede ir más allá del borde de un elemento.

El estilo overflow controla cómo reacciona el elemento cuando el contenido es mayor que el tamaño especificado del elemento.

Sin embargo, un elemento flotante dentro de div puede extenderse fuera del div, y ese elemento podría tener un fondo. Sin embargo, la utilidad de esto es limitada, ya que IE7 y versiones anteriores tienen un error que causa que div crezca en lugar de dejar que el elemento flotante se muestre fuera de él.

Answer 2

Después de un poco de la investigación: NO y NO :)

Answer 3

Intenté usar valores negativos para background-position pero no funcionó (al menos en Firefox). Realmente no hay ninguna razón para que lo haga. Simplemente configure la imagen de fondo en uno de los elementos más arriba en la jerarquía.

Answer 4

No, el fondo no se extenderá más allá de los bordes. Pero puede estirar el borde tanto como desee utilizando padding y algunos ajustes inteligentes de los márgenes negativos & posición.

Answer 5

Siguiendo el consejo de Kijin, me gustaría compartir mi solución para las compensaciones de imagen:

/* 
Only effective cross-browser method to offset image out of bounds of container AFAIK, 
is to set as background image on div and apply matching margin/padding offsets: 
*/ 
#logo { 
    margin:-50px auto 0 auto; 
    padding:50px 0 0 0; 
    width:200px; 
    height:200px; 
    background:url(../images/logo.png) no-repeat; 
} 

He utilizado este ejemplo en un simple elemento div < div id="logo"></div> para posicionar mi logotipo con un desplazamiento vertical de -50px . (Tenga en cuenta que los valores de margen/relleno combinados aseguran que no tenga problemas de margen colapso.)

Answer 6

no

posible establecer una imagen de fondo 'fuera' es elemento,

pero se puede hacer lo que desea con el uso de elemento 'PSEUDO' y hacer que el tamaño que desee y colocarlo donde quieras. ver aquí: he puesto la flecha fuera del lapso de

aquí está el código

HTML:

<div class="tooltip"> 
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span> 
</div> 

texto fuerte

.tooltip{position:relative; float:left;} 
    .tooltip .msg {font-size:12px; 
     background-color:#fff9ea; 
     border:2px #e1ca82 solid; 
     border-radius:5px; 
     background-position:left; 
     position:absolute; 
     padding:4px 5px 4px 10px; 
     top:0%; left:104%; 
     z-index:9000; position:absolute; max-width:250px;clear:both; 
    min-width:150px;} 


    .tooltip .msg:before { 
     background:url(tool_tip.png); 
     background-repeat:no-repeat; 
    content: " "; 
     display: block; 
     height: 20px; 
     position: absolute; 
     left:-10px; top:1px; 
     width: 20px; 
     z-index: -1; 
     } 

ver h Ejemplo: http://jsfiddle.net/568Zy/11/

Answer 7

Entiendo que esto es realmente muy tarde, y ni siquiera estoy seguro de si esto es una buena práctica, pero encontré una pequeña forma de hacerlo con mi pie de página. Mi última sección tenía una imagen de fondo que quería desbordar en el pie de página y la arreglé con unas pocas líneas de CSS. También se agregó un poco de relleno en la sección con la imagen de fondo.

footer{ 
background-color: transparent!important; 
top: -50px; 
margin-bottom: -50px; 
}