L'image d'arrière-plan est plus longue que la div englobant

Question

Sur un site Web client, je dois ajouter une image d'arrière-plan pour seulement une région contenue de la page (sa partie de contenu réel).

Le problème est que si le contenu est suffisamment court, l'image sera tronquée. Comment serait-il possible d'avoir l'image complètement visible? J'ai essayé d'ajouter l'attribut CSS "overflow" mais malheureusement cela ne m'a pas aidé.

Voici un exemple du site Web sur lequel je dois travailler: http://www.sfp-pensioen.nl/werknemer/welkom L'image d'arrière-plan se trouve sur l'élément div avec id = "content".

Sur le lien spécifique que j'envoie ce n'est pas un problème car le contenu est assez long, mais si vous supprimez des éléments en utilisant firebug alors le problème deviendra évident.

ps: IE6 doit être pris en charge.

Answer 1

À la suite de la réponse de Graham:

"hauteur" dans IE6 agit comme "min-height" à travers d'autres navigateurs.

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

L'exemple ci-dessus fournira une hauteur minimale de 50px. ie6 lira "_height" là où les autres navigateurs ne le feront pas. Si vous ne faites pas de hacks, utilisez une instruction conditionnelle.

Rich

Answer 2

overflow pour background-image s est impossible, mais vous pouvez définir une min-height pour content (ou définir l'image dans un autre div avec moins z-index et le positionner absolument génial apparaisse à l'endroit que vous voulez - mais c'est une très mauvaise solution)

Answer 3

l'attribut controls overflow ce qui se passe à la div lorsque le contenu est trop gros pour tenir - si vous avez un div de taille fixe avec un contenu qui pourrait déborder, vous voulez généralement l'option auto. overflow n'a aucun effet sur une image d'arrière-plan.

Pour votre cas, il semble que vous souhaitez spécifier un min-height sur le contenu div. Notez que cela n'est pas pris en charge par les anciens navigateurs comme IE6, dont vous pouvez ou non vous soucier. Cependant, il existe de nombreuses façons de contourner ce problème.

Answer 4

Ce que vous voulez est la hauteur de 100%, vous pouvez réaliser ceci avec ce qui suit.

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

Vous avez besoin du min-hauteur et le corps a besoin d'une hauteur de sorte que chaque élément enfant du corps suivra la règle.

Également en ajoutant min-height: 100%; à toutes les règles de css résoudra tous vos problèmes pour n'importe quel navigateur de catégorie A.

Answer 5

vous pouvez soit donner un height à l'id #content

ou

appliquer le background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; à #mainContent au lieu de #content

Answer 6

Si vous connaissez le #sidebarou#main aura toujours une hauteur visuelle égale ou supérieure à l'image de fond alors vous pouvez simplement ajouter l'image d'arrière-plan:

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

au lieu où il est un moment sur #content