Quelle est la meilleure pratique pour définir une image d'arrière-plan centré et 100% (de sorte qu'il remplit l'écran, mais conserve le rapport d'aspect) dans tous les navigateurs?Image de fond centrée et 100% dans tous les navigateurs
Récupérer un ancien message, car il existe une nouvelle méthode pour le faire avec un bon support par navigateur.
Utilisez background-image comme ceci:
background-size:cover;
background-position:center;
Cela ne détruira pas les proportions de l'image, mais l'échelle du mieux que possible ne jamais montrer aucune des barres noires (ou ce qui serait jamais en arrière-plan).
Le support du navigateur est presque parfait comme vous pouvez le voir sur Can I use it?. Opera Mini pourrait être un problème, mais le navigateur sera bientôt remplacé par Vivaldi.En conclusion, je pense que c'est définitivement la solution, car c'est de loin la solution la plus propre et la plus fiable et très facile à éditer avec JS.
Merci d'avoir mis à jour un ancien sujet. C'est comme ça que je le fais aujourd'hui. – jamietelin
Je ne sais pas comment y parvenir en le définissant comme une image d'arrière-plan. Cependant, vous pourriez avoir une image qui est absolument positionné
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
À quoi sert 'l'affichage: table; – ANeves
pour que l'alignement vertical fonctionne. il peut aussi être affiché: table-cellule – Kasturi
Je ne pense pas que vous en ayez besoin pour que l'alignement vertical fonctionne, l'alignement vertical est supposé fonctionner sur n'importe quel élément en ligne: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
Vous pouvez utiliser CSS3 background-size property, mais je ne suis pas sûr de savoir comment il est pris en charge. Je pense que la plupart d'entre eux, mais avec le préfixe:
-o-background-size
-webkit-background-size
-khtml-background-size
La meilleure pratique consiste à pas faire ce que vous voulez faire.
En spécifiant 100%, vous allez étirer (donc déformer) l'image.
La meilleure façon d'avoir un simple arrière-plan centré est comme ceci:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
Maintenant, vous pouvez cibler différentes résolutions et utiliser une image de fond différente, en fonction de la taille en spécifiant une feuille de style dépendant de la résolution. Vous pouvez utiliser des feuilles de style séparées simplement pour définir l'élément d'arrière-plan avec des fichiers différents dans chacun.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
Voir: http://css-tricks.com/resolution-specific-stylesheets/
Problème avec cette solution, c'est que j'ai besoin de faire beaucoup, beaucoup d'images avec une résolution différente. – jamietelin
Ceci est un excellent post sur deux méthodes pour obtenir cet aspect:
J'ai fait une version modifiée de la Technique # 2, fonctionne plutôt bien, vérifiez ma propre réponse à la question. – jamietelin
meilleure solution que j'ai réussi à faire jusqu'à présent est la suivante;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
Est-ce que ce serait le meilleur moyen? Quelqu'un voit-il des problèmes à le faire de cette façon?
Merci pour votre temps!
Qu'est ce que "tous les navigateurs"? Inclut-il IE6? (Pour votre propre bien, il vaut mieux pas.) – ANeves
Non, mais tous les navigateurs à jour :) Donc, IE8, Firefox 3, Safari 4 et ainsi de suite ... et par tout ce que je veux dire tous les principaux navigateurs pas Camino, Miro et bientôt. – jamietelin