imagen de fondo es más largo que el div que encierra

Question

En el sitio web del cliente, tengo que agregar una imagen de fondo por sólo una región contenida de la página (su verdadero parte de contenido).

El problema es, si el contenido es lo suficientemente corto, a continuación, se recortará la imagen. ¿Cómo sería posible tener la imagen completamente visible? He intentado añadir el "desbordamiento" de atributos CSS, pero por desgracia, no me ayuda.

Este es un ejemplo de la página web que tengo que trabajar en: http: // www. sfp-pensioen.nl/werknemer/welkom la imagen de fondo se encuentra en el elemento div con id = "contenido".

En el enlace específico que estoy enviando no es un problema ya que el contenido es lo suficientemente largo, pero si se quita elementos usando firebug entonces el problema se hará evidente.

ps:. IE6 debe ser apoyada

Answer 1

A raíz de la respuesta de Graham:

"altura" en IE6 actúa como "min-altura" a través otros navegadores.

min-height: 50px;
_height: 50px;

El ejemplo anterior proporcionará una altura mínima navegador transversal de 50 píxeles. IE6 leerá "_height" donde otros navegadores no lo hará. Si usted no hacks, utilice una instrucción condicional.

Rich

Answer 2

Usted podría dar una height a la #content id

o

aplicar el background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; a #mainContent en lugar de #content

Answer 3

overflow para background-images es imposible, pero se puede establecer un min-height para content (o ajustar la imagen en otro div con menor z-index y la posición que abolutely que aparezca en el lugar que usted quiere - pero eso es una solución muy mala)

Answer 4

El atributo overflow controla lo que sucede a la div cuando el contenido de es demasiado grande para caber - si usted tiene un div de tamaño fijo con algún contenido que pudiera desbordarse, por lo general quieren la opción auto. overflow no tiene ningún efecto en la imagen de fondo.

En su caso, parece que desea especificar un min-height en el div contenido. Tenga en cuenta que esto no es soportado por los navegadores más antiguos como IE6, que se puede o no se preocupan por. Hay un montón de maneras de solucionar este problema, sin embargo.

Answer 5

Lo que queremos es la altura del 100% se puede lograr esto con lo siguiente.

html {
    height: 100%;
}
body {
    height: 100%;
}
#content {
    height: 100%;
}

Es necesario el min-altura y el cuerpo necesita una altura por lo que cada elemento hijo del cuerpo va a seguir la regla.

también mediante la adición de min-height: 100%; a todas las reglas CSS va a resolver todos sus problemas para cualquier grado A navegador.

Answer 6

Si conoce el #sidebar o #main siempre tendrá una altura visual igual o más grande que la imagen de fondo, entonces puede simplemente añadir la imagen de fondo:

.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}

lugar de donde es un momento en #content