Image de fond plein écran quelque soit la résolution

Bonjour à tous et merci de m'accepter sur ce forum.
Je suis nouveau à tout point, sur ce forum et en programmation.

Voilà, je souhaiterai savoir comment faire pour mettre une image de fond sur une page HTML qui soit en plein écran et quelque soit la résolution de l'écran.

J'ai fait pas mal de recherche mais je ne trouve rien de concret...
Pouvez vous m'aider ?

Et encore félicitation pour ce forum car j'ai trouver bcp de choses interessantes mais pas encore ce que je cherche.

Timtof.

Bonjour timtof et bienvenue sur ce forum,

timtof a écrit :
Voilà, je souhaiterai savoir comment faire pour mettre une image de fond sur une page HTML qui soit en plein écran et quelque soit la résolution de l'écran.

J'ai fait pas mal de recherche mais je ne trouve rien de concret...

C'est parce qu'il n'existe rien de concret, justement. Du moins rien de fiable.

Une possibilité serait de créer plusieurs images dans diverses résolutions, de les attribuer comme images de fond de l'élément body via une série de styles CSS, et de passer par Javascript pour appliquer l'un ou l'autre de ces styles suivant les informations (assez peu fiables) que l'on pourra récupérer sur la largeur de l'élément body.

Mais ça risque d'être compliqué à mettre en place (surtout pour un néophyte), et il doit y avoir un certain nombre d'écueils importants.

Le plus sage sera sans doute de revoir tes ambitions à la baisse, et d'imaginer un design avec image de fond qui passera bien qu'elle soit tronquée ou qu'elle parte en fondu vers une couleur de fond unie.

Que voulais-tu réaliser au juste comme mise en page ? On pourra peut-être te donner un conseil ou deux.

Bonjour Florent, merci de ta réponse...
Effectivement, possible que je sois trop ambitieux mais enfin on envois bien des navette dans l'espace...

En fait ce que je ne voulais pas avoir sur ma page (1024x768)c'est une image coupé sur le fond lorsque le contenu de la page passe au dessus de 768, alors j'ai essayé de bidouiller mon image pour la rendre plus grande en hauteur 1024x2000 par exemple mais alors la taille de celle-ci étant plus grande, son téléchargement sur le net en est ralenti.

voilà, j'espère que vous aurez une solution pour m'aider.

Bon week end à tous.

Si je place dans une page un fichier swf, est il possible là de redimensionner en plein écran le visuel ?
Avec Iframe ou Frame ?

Merci .

timtof a écrit :
Effectivement, possible que je sois trop ambitieux mais enfin on envois bien des navette dans l'espace...

Oui, mais bon ça n'a rien à voir, donc voilà.

timtof a écrit :
voilà, j'espère que vous aurez une solution pour m'aider.

Une image de ce que tu souhaiterais réaliser, peut-être ? Parce que je veux bien parler dans le vide ou bien couvrir tous les cas de figures possibles, mais il faudra me payer (cher) pour ça.

timtof a écrit :
Si je place dans une page un fichier swf, est il possible là de redimensionner en plein écran le visuel ?

Oui, il est possible de redimensionner aussi bien une image de contenu qu'une animation Flash. Mais pas comme images de fond.

Et laissons les frames en dehors de tout ça, sinon ça va mal finir.

voici mon image

pour placer mon fichier swf au centre de ma page comment je dois faire ?

Au risque de me répéter (je rajoute un peu de gras pour qu'y voie plus clair) :

Florent V. a écrit :
Une image de ce que tu souhaiterais réaliser, peut-être ?

Quant au centrage de l'animation Flash, s'agit-il d'un centrage vertical ou d'un centrage horizontal (ou les deux) ? Et l'animation en question est-elle l'essentiel du site, ou bien juste un élément ?

Ce que tu pourrai faire, ce serait de récupéré la résolution de l'écran de l'utilisateur, et ensuite affiché l'image qui correspond à la résolution, tu serai juste amener a créé chaque image selon la résolution, je pense que 3 suffiraient, 800x600, 1024x768 et 1280x1024. Si tu veux n'en utiliser qu'une seule, tu n'as qu'a utiliser une librairie php de redimensionnement d'image, qui te permettrait de redimensionner en fonction de ta page ton image...
Et ce serait donc une image qui serait placer en fond d'un div ou de ton body.

Personnelement je ne pense pas que ce serait vraiment très compliquer, il suffit qu'on veuille bien te donner un petit coup de main...
Modifié par mikl194 (11 Mar 2007 - 01:04)

Bonjour,

Il n'existe pas actuellement de technique basée sur HTML, CSS2 et/ou javascript permettant d'obtenir ce résultat de manière robuste.

Un module CSS3 spécifique a été développé pour répondre à ce besoin (media queries). Il n'est cependant implémenté actuellement que par un seul navigateur graphique classique (Opera), et rienn'annonce son implémentation dans les prochaines versions d'IE / FF.

Il est donc préférable actuellement de ne pas baser une mise en page sur cette contrainte.

Hello,

Je n'ai pas trop regardé comment c'est fait mais il existe ça :

http://www.cssplay.co.uk/layouts/background.html

koala64 a écrit :
Je n'ai pas trop regardé comment c'est fait

Mal (image déformée dans un rendu 16/9, par exemple. La dernière des choses à faire est de fixer à la fois width et height à 100% . Sans compter le double positionnement absolu inutile ).

Laissez tomber, on vous dit...
Modifié par Laurent Denis (12 Mar 2007 - 08:37)

C'est clair...

Je suis en 16/10 et le lapin, il a une tête bizarre...

Bonjour à tous,
J'interviens un peu tard mais je viens de tombre sur le sujet.
Le cas est tout à fait possible avec un appel à un javascript (swfObject.js).
Celui-ci donne exactement le résultat voulu (animation flash transparente et centré sur la page quelque soit la résolution).
Il suffit juste de charger l'image dans l'animation flash ou bien d'appeler celle-ci par du CSS expliqué ci-dessus.
Une petite recherche sur Google avec le terme "swfobject" vous enverra sur plusieurs sujets et exemples.
Désolé je ne peux pas donner plus d'explications pour le moment.

Oui, et on en revient à l'éternel soucis: que se passe-t-il lorsque l'on a pas de javascript activé (comme c'est le cas dans mon lycée)...

Une telle photo (comme au dessus) étirée serait tout simplement horrible, car elle est de petit format.
Imaginez son rendu sur un 1600x1200...
Bref, si ce n'est pas possible de l'étirer, est-ce souhaitable ?

Je pense que la meilleure solution reste ne pas mettre de photos en fond d'écran (ce qui n'est pas plus mal pour la lisibilité de l'écran).

Quand bien même on en met une, on peut soit s'arranger pour qu'elle ne se répète pas, soit pour qu'elle soit centrée, seule, avec un fond uni.
Mais ce n'est pas une solution viable; les écrans sont de plus en plus grands.

Sinon, mettre une grande photo, à la limite...

Enfin, c'était mon avis, loin des discours éclairés de Laurent