J’ai récemment intégré plusieurs maquettes utilisant une large image de fond derrière le site. En réalisant les tests de compatibilité Ipad, je me suis rendu compte que le résultat était bien différent. L’image de fond était réduite par le navigateur pour éviter de sortir du viewport.

Pour contourner ce problème, j’ai essayé différentes techniques de positionnement d’image :

  • Un grand div centré sur la page avec taille fixe et image de fond
  • Une image de fond sur le <body>
  • Une image de fond sur l’élément principal de mon site
  • Une balise image de taille fixe et centrée

Chacune de ces méthode m’a donné exactement le même résultat. J’ai poursuivit mes recherches pour finalement trouver trois approches me permettant de répondre à mon besoin.

Assemblage

La première technique consiste à découper l’image de fond et l’assembler en plusieurs éléments. Ces éléments de taille réduite peuvent ensuite être géré indépendamment les uns des autres. Grâce aux détection de taille d’écran, on peut cacher ou ajuster les images pour que le fond du site reste cohérent et bien proportionné

Feuille de style spécifique

Par extension à la première solution, il est possible d’utiliser une feuille de style spécifique. Cette CSS peut intégrer une image de fond adaptée en fonction de la résolution d’écran (comme la taille de l’écran est fixe, il est facile de créer une image de la bonne taille).

La contrainte avec cette approche est qu’il faut créer deux images de fond différentes et qui seront potentiellement chargées dans la page. Le surplus de poids est considérable et pas très adapté à une utilisation mobile.

Propriété CSS

J’ai finalement trouvé une propriété CSS permettant de gérer ce cas spécifique, background-size. Cette propriété définit la taille à utiliser pour l’image définit en arrière plan.

Mon problème ne touche que les Ipad, j’ai donc utilisé la version préfixée pour ne cibler que ce type de périphérique.

Cette dernière technique fonctionne très bien! Dans mon cas c’est celle qui était la plus rapide et la plus adaptée à mettre en place…