Adaptation d'une Image background à la largeur d'écran

Salut,

ce n'est pas la taille de l'écran qui compte (32 ou 13 pouces ou 7 centimètres) mais la résolution de l'écran l'important(le rapport entre pixels largeur X hauteur ex: 1920X1080 pixels).

Je ne sais pas ce qui va pas dans votre CSS pour qu'il ne s'adapte pas mais une chose est sûre votre image est beaucoup trop grande et cela peut poser des problèmes. Je ne connait pas la résolution de votre image en pixels par pouce(72 c'est pour le web au dessus comme 180 ppp ou plus c'est beaucoup trop) mais une chose est sûre votre image doit avoir un poids nettement supérieur à 2Mo.

Ce qui veut dire que le temps de chargement est de l'ordre de 100 fois (à 1000 fois) plus élevé pour charger votre image de fond que l'ensemble du reste de la page(je parle des contenus textes qui font autour de 120ko si vous en avez beaucoup).

Sur un appareil mobile la RAM(mémoire vive) est beaucoup plus limité que sur un ordinateur de bureau et par défaut celle ci va éviter de charger des trucs lourds.

Quant à avoir une image qui 4032 x 2268 pixels pour l'afficher sur un écran (résolution) qui à une résolution moyenne de 1280 X 720(HD) c'est simplement contre productif....imaginez sur un écran de mobile qui a 315 X 820 pixels(IPad 11) ou nettement moins.

En plus de n'avoir aucune utilité(puisque votre taille d'image à qualité élevée sera redimensionnée en une qualité au moins 3 fois plus faible au niveau de l'affichage) la poids du fichier ralentira considérablement le chargement de la page et risque facilement de saturer la RAM.

Donc évitez surtout pour un fond qui est censé être de la décoration et non le contenu en lui même.

Solutions:

_utilisez une image plus petite redimensionné en l'appliquant en fond sur seulement une zone de la page et non body qui contient toute la page.

_pour un fond sur toutes la page vous pouvez utiliser une texture à partir d'un carré de 20 à 30 pixels qui se répète(les bords sont identiques voir le CSS background-repeat) et pésera autourt de 15/20 octets donc un temps de chargement négligeable.

exemple: https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-repeaty

Voilà en espérant que mes explications vous ai aidé à comprendre pourquoi avec un code théoriquement juste le problème se situe au niveau des limitations techniques et logique. Par exemple il est simplement illogique de charger une image de fond en mode paysage(largeur > hauteur) si l'appareil qui affiche celle ci est en mode portrait(hauteur > largeur).

D'ailleurs votre code @media ne concerne absolument pas la manière dont est chargée l'image de fond...à quoi sert il au juste. Si vous voulez corriger ou garder en l'état il serait judicieux de remplacer le CSS par le chargement d'une image en qualité nettement plus basse(et poids) pour la rendre accessible par un appareil avec une résolution d'écran moindre et moins de RAM+vitesse de connexion nettement moins élevée.

Une image dans la page devrait peser au maximum 1.5Mo surtout s'il y en a plusieurs.

Pas tout le monde a la fibre et beaucoup de gens utilisent le wifi ou la 2,3, 4 G qui a des débits bien plus faibles. Il est inimaginable que l'utilisateur ait à attendre pour afficher une page, dans la plupart des cas il va pas rester sur le site avant qu'il ai chargé ou simplement pas revenir dessus.

==> oubliez les images en hautes qualités et grande tailles. Pour le web c'est du 72ppi et des petits formats. Si vous voulez afficher une image de qualité il faut la mettre à part(téléchargement ou page dédiée) et éventuellement proposer une version miniature d'aperçu pour éviter un temps de chargement trop important.

Mais bon ici c'est une image de fond donc pas un contenu principal mais une décoration, dommage qu'une telle décoration rende votre site difficile à consulter(surtout s'il y a des images considéré comme des images <img> le poids va s'ajouter et votre site mettra des plombes à s'afficher).