Parfait Plein Arrière-plan, CSS-Tricks

Remplit page entière avec l'image, pas d'espace blanc
Scales l'image au besoin
Conserve proportions de l'image (rapport d'aspect)
L'image est centrée à la page
Ne provoque pas scrollbars
Aussi compatible que possible cross-browser
N'est pas une fantaisie manigances comme Flash

Impressionnant, facile, progressive CSS3 Way

Nous pouvons le faire uniquement par CSS grâce à la propriété background-size maintenant CSS3. Nous allons utiliser l'élément HTML (mieux que le corps comme il est toujours au moins la hauteur de la fenêtre du navigateur). Nous avons établi un fond fixe et centrée sur, puis ajuster sa taille à l'aide de la taille d'arrière-plan défini sur le mot-clé de couverture.

Safari 3+
Chrome Quelle que soit +
IE 9+
Opera 10+ (Opera 9.5 pris en charge la taille de fond, mais pas les mots-clés)
Firefox 3.6+ (Firefox 4 supporte la version préfixée non fournisseur)

Mais attention, lecteur Pierre Orsander dit avoir essayé cela et eu quelques problèmes avec des liens sur la page mort va.

Mise à jour: Matt Litherland écrit pour dire que quiconque tenterait d'utiliser les filtres IE ci-dessus et des problèmes avec des barres de défilement ou des liens morts ou tout autre chose (comme Pierre ci-dessus) devrait essayer de ne pas les utiliser sur l'élément html ou corps. Mais au lieu d'un div de position fixe avec une largeur de 100% et la hauteur.

CSS-Only Technique # 1

Un grand merci, comme d'habitude, à Doug Neiner pour cette version alternative. Ici, nous utilisons une ligne élément, qui sera capable de redimensionner dans tout navigateur. Nous avons établi un min-hauteur qui maintient le remplissage de la fenêtre du navigateur verticalement, et définir une largeur de 100%, ce qui maintient le remplissage à l'horizontale. Nous avons également mis un min-largeur de la largeur de l'image afin que l'image ne devient plus petite qu'elle ne l'est en réalité.

Voici le CSS:

Toute version de bons navigateurs: Safari / Chrome / Opera / Firefox
IE 6: foireuse - mais probablement fixable si vous utilisez une sorte de cale de positionnement fixe
IE 7/8: Travaux La plupart du temps, ne centre pas de petite taille, mais remplit bien l'écran
IE 9: Travaux

CSS-Only Technique # 2

Une façon assez simple à manipuler est de mettre une image en ligne sur la page, la position fixe à la partie supérieure gauche, et de lui donner un minimum de largeur et de hauteur min de 100%, en conservant son rapport d'aspect.

Toutefois, cela ne centre pas l'image et qui est un désir assez commun ici. Ainsi, nous pouvons résoudre ce problème en enveloppant l'image dans un div. Ce div nous allons faire deux fois plus grand que la fenêtre du navigateur. Ensuite, l'image sera placée, en préservant son rapport d'aspect et couvre la fenêtre du navigateur visible, et le point mort de cela.

Crédit Corey Worrell pour le concept sur celui-ci.

Procédé jQuery

Cette idée devient beaucoup plus facile (dans une perspective CSS) si l'on sait si le rapport d'aspect de l'image (en ligne nous avons l'intention d'utiliser comme arrière-plan) est plus grand ou plus petit que le rapport d'aspect en cours de la fenêtre du navigateur. Si elle est inférieure, que nous ne pouvons régler que la largeur à 100% sur l'image et le savoir remplira la hauteur et la largeur. Si elle est supérieure, nous pouvons définir que la hauteur à 100% et nous savons qu'il remplira à la fois la hauteur et la largeur.

Cela ne tient pas compte de centrage, mais vous pouvez modifier cet hôtel à faire. Crédits à Koen Haarbosch pour le concept derrière cette idée.

IE7 + (pourrait probablement obtenir dans IE6 avec une cale de position fixe)
La plupart d'un autre navigateur de bureau

Tout d'abord, vous feriez des images comme 1024.jpg, 1280.jpg, 1366.jpg, etc. Ensuite, au lieu de charger un img, vous souhaitez charger une cale.

Si vous n'aimez pas la cale gif (Personnellement, je pense qu'il est OK parce que ce n'est pas « content » c'est un arrière-plan), vous pouvez charger une des images réelles à la place. Ce code compte pour cela.

Notez que la largeur de l'écran est la seule possible une bonne information pour avoir au moment de choisir une taille d'image. Voir cet article.

Juste pour l'amour de la postérité, il y a un autre exemple ici appelé table.php qui utilise une technique ancienne qui était autrefois une partie de cet article. Il avait une certaine intelligence, mais n'a pas été tout à fait aussi bon que ce soit technique CSS maintenant présenté ci-dessus.

Autres ressources

Le conteneur div qui permet de contenu à afficher laisse une grande boîte blanche au milieu de la page.

Un peu d'informations supplémentaires et nous devrions être en mesure de faire pratiquement tout.

Merci Chris pour un autre grand poste!

J'ai exploré toutes sortes de solutions non-flash en plein écran pour mes dessins. Une chose que je voulais trouver une solution navigateur cross qui

a) redimensionnée en utilisant le centre de l'image et non pas la partie supérieure
b) a pu disparaître dans le chargement de la page (avec le contrôle total « préchargement »)
c) Utilisé un montant minimum de code pour le rendu des pages rapide.

Supersize était l'un de mes premier choix. Mais son JS a été en conflit avec d'autres éléments et je n'ai pas aimé le fait que l'image ne pouvait pas disparaître dans bien tout le temps. Selon ce qui se passait chargement de la page, il n'y avait aucun moyen sûr de contrôler le processus.

Je me suis alors trouvé une autre approche qui fonctionne pour autant que je peux dire dans tous les navigateurs, ne pas utiliser JS ou Flash et a répondu à mes exigences.

Il est un mélange de CSS et de l'utilisation des tableaux. Je sais ... ce n'est pas « pure », mais il fait l'affaire si bien ...

Je suis en mesure de cibler l'img avec JQuery pour avoir fondu dans la charge de page exactement comme je le voulais - une fois que l'image était vraiment prêt pour l'affichage - pas de place pour l'erreur et pas de place pour JQuery lancer la fadein avant que l'image soit téléchargé.

L'arrière-plan est un fond plein écran qui échange via une balise div imbriqué. Il a été testé de nouveau à IE6 et fonctionne dans la plupart tous les navigateurs. Runs un peu rude dans les navigateurs plus anciens en raison de certaines fonctionnalités jQuery aléatoire ajoutée par demande du client.

Hey c'est vraiment la plus propre - moyen le plus simple d'avoir un fond de cul doux!

Mais je ne peux pas sembler obtenir ce Workin dans mon DIV. Il devrait être possible droit?
Mon DIV a une largeur de fluide et une hauteur fixe de 200px.

Je veux l'image d'arrière-plan pour adapter toujours en largeur, maintenir rapport d'aspect et le centre.

Mais comment puis-je gérer cela avec ces codes?

Est-il possible d'avoir un plusieurs images pleine page, qui sont des images d'arrière-plan?

Par exemple, si vous aviez un certain nombre d'images dans le code HTML et vous vouliez chacun d'avoir la hauteur et la largeur du navigateur et mise à l'échelle proportionnelle de la même manière que fond couverture atteint, mais aussi garder dans le flux de documents afin que vous pourrait faire défiler la page comme d'habitude.

Donc, fondamentalement, comme le nombre de Technique 2, mais sans positionnement fixe sur le parent?

Articles Liés

Précédent ◈ Suivant