Utiliser CSS3 pour étirer une image d'arrière-plan pour ajuster une page Web

Les images sont une partie importante de la conception attrayante de sites Web. Cela inclut l'utilisation d'images d'arrière-plan. Ce sont les images et les graphiques qui sont utilisés derrière zones d’une page par opposition aux images présentées dans les pages de contenu. Ces images d'arrière-plan peuvent ajouter un intérêt visuel à une page et vous aider à réaliser le design visuel que vous recherchez peut-être sur une page.

Si vous commencez à travailler avec des images d'arrière-plan, vous rencontrerez sans aucun doute le scénario dans lequel vous souhaitez qu'une image s'étire pour s'adapter à la page. Cela est particulièrement vrai pour les sites Web réactifs livrés à une large gamme d'appareils et de tailles d'écran.

Ce désir d'étirer une image d'arrière-plan est un désir très commun chez les concepteurs Web, car toutes les images ne rentrent pas dans l'espace d'un site Web. Au lieu de définir une taille fixe, l’étirement de l’image lui permet de s’adapter à la page, quelle que soit la largeur ou la largeur de la fenêtre du navigateur.

Le meilleur moyen d'étirer une image pour l'adapter à l'arrière-plan d'une page consiste à utiliser la propriété CSS3, pour la taille de l'arrière-plan. Voici un exemple qui utilise une image d’arrière-plan pour le corps d’une page et qui définit la taille sur 100% afin qu’elle s’étire toujours pour s’ajuster à l’écran.

corps { fond: url (bgimage.jpg) no-repeat; taille du fond: 100%; }

Selon caniuse.com, cette propriété fonctionne dans IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ et sur tous les principaux navigateurs mobiles. Cela vous concerne pour tous les navigateurs modernes disponibles aujourd'hui, ce qui signifie que vous devez utiliser cette propriété sans craindre que cela ne fonctionne pas sur l'écran de quelqu'un.

Simuler un fond étiré dans d'anciens navigateurs

Il est très peu probable que vous ayez besoin de prendre en charge des navigateurs plus anciens que IE9, mais supposons que vous craignez que IE8 ne prenne pas en charge cette propriété. Dans ce cas, vous pouvez simuler un fond étiré. Et vous pouvez utiliser les préfixes du navigateur pour Firefox 3.6 (-moz-background-size) et Opera 10.0 (-o-background-size).

Le moyen le plus simple de simuler une image d'arrière-plan étirée consiste à l'étirer sur toute la page. Vous ne disposez alors pas d’espace supplémentaire ni d’inquiétude de voir votre texte s’insérer dans la zone étirée. Voici comment faire:

id = "bg" />

1. Tout d’abord, assurez-vous que tous les navigateurs ont une hauteur de 100%, une marge de 0 et un remplissage de 0 sur etHTML CORPS éléments. Placez le texte suivant dans l'en-tête de votre document HTML:
2. Ajoutez l’image que vous voulez utiliser comme arrière-plan en tant que premier élément de la page Web et donnez-lui la identifiant de "bg":
3. Positionnez l’image d’arrière-plan de sorte qu’elle soit fixée en haut et à gauche et qu’elle mesure 100% de large et 100% de hauteur. Ajoutez ceci à votre feuille de style:
   1. img # bg {
   3. position: fixe;
   5. en haut: 0;
   7. gauche: 0;
   9. largeur: 100%;
   11. hauteur: 100%;
   13. }
4. Ajoutez tout votre contenu à la page à l'intérieur d'un DIV élément avec un identifiant de "contenu". Ajouter le DIV sous l'image:Tout votre contenu ici - y compris les en-têtes, les paragraphes, etc.
   1. Remarque: il est intéressant de regarder votre page maintenant. L'image devrait afficher une image agrandie, mais votre contenu est complètement manquant. Pourquoi? Parce que l'image d'arrière-plan est à 100% en hauteur et que la division de contenu est après l'image dans le flux du document - la plupart des navigateurs ne l'afficheront pas.
5. Positionnez votre contenu de sorte qu'il soit relatif et qu'il ait z-index 1. Cela l’amènera au-dessus de l’image d’arrière-plan des navigateurs conformes aux normes. Ajoutez ceci à votre feuille de style:
   1. #contenu {
   3. position: relative;
   5. z-index: 1;
   7. }
6. Mais tu n’as pas fini. Internet Explorer 6 n’est pas conforme aux normes et pose encore quelques problèmes. Il existe de nombreuses façons de masquer le code CSS de tous les navigateurs sauf IE6, mais le plus simple (et le moins susceptible de causer d’autres problèmes) consiste à utiliser des commentaires conditionnels. Placez les éléments suivants après votre feuille de style dans l'en-tête de votre document:
7. Dans le commentaire en surbrillance, ajoutez une autre feuille de style avec certains styles pour que IE 6 joue bien:
8. Assurez-vous de tester également dans IE 7 et IE 8. Vous devrez peut-être également ajuster les commentaires pour les prendre en charge. Cependant, cela a fonctionné quand je l'ai testé.

OK, c’est un peu excessif. Très peu de sites ont besoin de supporter IE 7 ou 8, encore moins IE6! En tant que telle, cette approche est désuète et probablement inutile pour vous. Je le laisse ici plutôt comme un modèle de curiosité quant à la complexité des choses avant que tous nos navigateurs ne jouent si bien ensemble!

Simuler une image d'arrière-plan étirée sur un espace plus petit

Vous pouvez utiliser une technique similaire pour simuler une image d’arrière-plan étirée sur une DIV ou un autre élément de votre page Web. C'est un peu plus délicat, car vous devez utiliser un positionnement absolu ou avoir des problèmes d'espacement étranges pour d'autres parties de votre page.

1. Placez l'image sur la page que je veux utiliser comme arrière-plan.
2. Dans la feuille de style, définissez une largeur et une hauteur pour l'image. Notez que vous pouvez utiliser des pourcentages pour la largeur ou la hauteur, mais je trouve plus facile d’ajuster les valeurs de longueur pour la hauteur.
   1. img # bg {
   3. largeur: 20em;
   5. hauteur: 30em;
   7. }
3. Placez votre contenu dans un div avec le identifiant "contenu" comme nous l'avons fait ci-dessus:Tout votre contenu ici
4. Donnez au contenu la même largeur de largeur et de hauteur que l’image d’arrière-plan:
   1. div # content {
   3. largeur: 20em;
   5. hauteur: 30em;
   7. }
5. Placez ensuite le contenu à la même hauteur que l’image.Donc si votre image est 30em vous auriez un style de haut: -30em; N’oubliez pas de mettre un z-index de 1 sur le contenu.
   1. #contenu {
   3. position: relative;
   5. en haut: -30em;
   7. z-index: 1;
   9. largeur: 20em;
   11. hauteur: 30em;
   13. }
6. Ajoutez ensuite un index z de -1 pour les utilisateurs d'IE 6, comme vous l'avez fait ci-dessus:

Encore une fois, avec la taille de l’arrière-plan, profitant de la large prise en charge du navigateur, cette approche est également très probablement inutile et présentée comme un produit d’une époque révolue. Si vous souhaitez utiliser cette approche, assurez-vous de la tester dans autant de navigateurs que possible. Et si votre contenu change de taille, vous devrez modifier la taille de votre conteneur et de votre image d'arrière-plan. Sinon, vous obtiendrez des résultats étranges.