¿Cómo puedo extender el fondo de un elemento más allá de su contenedor?

Question

Tengo un div que contiene una etiqueta h3, y quiero que el fondo del h3 se extienda más allá de la etiqueta div que lo contiene hasta el borde de la página. ¿Hay alguna manera de hacer esto en CSS?
Consideré posicionar absolutamente el h3, pero no sé el tamaño desde el borde de la pantalla hasta el borde del div (donde quiero que esté) ya que el div está centrado.

Answer 1

Lamentablemente, lo que está intentando hacer es imposible con CSS simple, ya que necesita saber la distancia hasta el borde derecho. El posicionamiento absoluto funcionaría bien. Por supuesto, usted puede hacer esto fácilmente usando algo de JavaScript, y aún más fácil si se utiliza jQuery:

$(function() { 
    $('h3').each(function() { 
     $(this).width($(window).width() - $(this).offset().left); 
    }); 
}); 

Y en CSS:

h3 { 
    position: absolute; 
    ... 
} 

Answer 2

Un fondo de elementos no puede extenderse más allá de su cuadro delimitador.

En algunos casos podría extender el H3 más allá de su contenedor estableciendo márgenes negativos, pero necesitaría el ancho exacto de la página.

Parece que lo que desea es reorganizar su HTML para que esto sea posible.

Answer 3

En esta página, he utilizado Firebug para cambiar css del título de la pregunta .

#question-header h2 { 
    background:lime; 
    margin-bottom:-1000px; 
    padding-bottom:1000px; 
} 

Esto es lo que sucedió: alt text http://public.zastica.com/so-background.png

No es una cuestión div-cabecera # que sólo se extiende a la parte superior de la pregunta ("Tengo un div ..."). La clave es tener un fondo acolchado grande y un margen inferior grande (negativo).

Esto también funciona para fondos de lado a lado. Solo tiene que asegurarse de que el contenedor no tenga configurado overflow: hidden.

Editar: para conseguir este efecto a derecha e izquierda, establece:

html { 
    overflow-x: hidden; 
} 

#question-header h2 { 
    padding: 0 1500px; 
    margin: 0 -1500px; 
} 

El html { overflow-x: hidden; } impide que el ancho de la página de conseguir muy grande debido al relleno.