2010-09-04 4 views
0

Je me bats avec ce depuis une heure et je me demandais si quelqu'un d'entre vous avaient des idées sur ce ..html/numéro css .. plein fond largeur sans défilement

Un client a besoin d'un beau grand fond image sur le site. Je ne peux pas utiliser cette image comme arrière-plan pour le corps ou n'importe quelle div parce que je ne veux pas qu'elle soit recadrée horizontalement. Si la largeur du navigateur est inférieure, l'arrière-plan doit être réduit. Donc, je viens d'utiliser une balise img avec positionnement absolu et index z.

Cependant (et c'est là que ça devient compliqué), l'image est assez grande, et je ne veux pas de barres de défilement sur le côté après le contenu utile. Débordement = masqué sur le corps est inutile car j'ai besoin de barres de défilement si le contenu est trop, mais plus petit que l'image. Overflow = caché sur un div qui a la hauteur, min-height et max-height set et contient l'image ne semble tout simplement pas fonctionner. Je ne sais pas pourquoi.

Et min-height, max-height et height ne fonctionnent pas non plus pour l'étiquette body.

Des idées utiles? Je pense que c'est faisable par javascript, mais je ne veux pas exécuter un script chaque fois que la fenêtre est redimensionnée. Je préférerais une solution html/css

PS: Tous les navigateurs (Opera, Safari, IE8, Firefox, Chrome) sont ouverts en ce moment, et ce n'est pas seulement un problème de navigateur.

Répondre

0

Je ne peux pas construire un test en ce moment, mais un absolument positionné de manière fixe div avec position: fixed; width: 100%; height: 100%; overflow: hidden et l'image à l'intérieur avec width: 100%pourrait faire l'affaire. Il redimensionnera l'image à la largeur de la fenêtre, mais ne créera pas de barres de défilement horizontales.

Le reste de la page peut nécessiter un z-index au-dessus de div. Notez que le body devra avoir min-height: 100% pour que cela fonctionne.

position: fixed ne fonctionnera pas dans IE < 7.