[RESOLU] Background / proportionnel à la résolution écran

Bonjour à tous,

Je reviens vers vous car j'ai soulevé une problèmatique dont je n'ai pas trouvé la réponse technique parfaite ...

Comment faire pour qu'un background de site web se redimentionne automatiquement en fonction de la résolution d'affichage de l'internaute ?

=> Solution 1 : passer par javascript et charger un background différent pour chaque résolution ... Lourd en traitement et ne fonctionne que si javascript n'est pas activé.

=> Solution 2 : Le background est substituable à un cadre intégré dans une balise <div>. "Voir Cadre élastique dans les deux dimensions" http://www.alsacreations.com/livre/?/Exemples/exquatorze ... Si le background a un aspect irrégulier ce n'est pas possible. Voyez cette image par exemple : http://www.dreamstime.com/music-to-her-belly-image3852971

=> Solution 3 : passer par un background Flash transparent (voir WMODE). Flash redimensionnerait l'animation selon la résolution de l'écran. Or si le navigateur ne dispose pas de plugin flash comment fait-on ?

Par avance, je vous remercie de votre aide
Modifié par popovitch (27 Dec 2007 - 15:44)

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

Désolé, je viens de corriger ça. (Lorsqu'on clique sur le bouton lien, l'insertion se fait automatiquement en fin de texte et le focus se fait en début)

Hello !

N'hésitez pas à postez vos commentaires ou vos expériences à ce sujet, je suis tout ouï Joyeux Noël !
Modifié par popovitch (25 Dec 2007 - 12:44)

il y a un pb avec mon topic ?

popovitch a écrit :
il y a un pb avec mon topic ?

Du tout, mais la période actuelle ne joue pas en ta faveur.

Je ne suis pas certain d'avoir bien compris ce que tu essayes de réaliser, mais s'il s'agit uniquement d'obtenir une image de fond qui se redimensionne proportionnellement à la fenêtre, une simple règle de taille fluide suffit:

[#black][b]HTML[/b][/#]

<p id="fond">
<img alt="" src="fond.png" />
</p>


[#black][b]CSS[/b][/#]

#fond img {width:50%;}

Le contenu suivant pourra être positionné absolument afin de recouvrir cette image de fond.

popovitch a écrit :
une problèmatique dont je n'ai pas trouvé la réponse technique parfaite ...

Ce qui est bien normal, vu que cette réponse technique parfaite n'existe pas.

Toutes les solutions pour «fluidifier» une image de fond non répétable sont soit des bricolages, soit des adaptations (dans ce dernier cas, on ne redimensionne pas l'image, mais on joue sur son positionnement afin d'obtenir un rendu correct dans diverses résolutions).

Dans la liste des possibilités apparentées au bricolage:
- la propriété CSS filter, propriétaire et compatible IE uniquement;
- l'utilisation d'une image HTML (balise <img>) étirée, placée en dessous du contenu;
- l'utilisation d'une animation Flash, placée en dessous du contenu;
- peut-être des choses faisables avec SVG ou canvas (mais bon, niveau implémentations c'est pas encore ça...).

Par rapport à la solution image HTML, la solution Flash offre un meilleur algorithme de sous- et sur-échantillonnage (les capacités des navigateurs eux-même étant très limitées en la matière).
Si Flash est désactivé, eh bien... on peut avoir une image de fond non redimensionnée en renfort, ou bien une couleur de fond unie, pourquoi pas.

Merci pour ces explications.
Je vous souhaites de bonnes fêtes de fin d'année.