Background pour tous types de moniteurs et résolutions... Possible ?

Bonjour à toutes et tous ( ) !

Compte tenu de votre Excellente Réputation parvenue à mes oreilles depuis longtemps, je me suis décidé à m'inscrire sur votre "Forum" de Renom (^_^).

Avant tout, je me présente : David, 31 ans de Strasbourg / nouveau parmi vous ainsi que dans le Monde de l' "HTML" et du "CSS" (^_^)...

J'ai depuis un bon bout de temps un projet de modeste "Blog" (encore bien "inachevé" et en construction) ainsi qu'un projet de "véritable" Site. Depuis le jour où l'hébergeur du "Blog" en question a donné accès aux éditions "HTML" et "CSS", je me suis jeté sur l'occasion pour faire mes premières armes sur ces deux "écritures" à l'aide, bien entendu de bouquins, de "Tutoriaux" et de "Forums" (c'est d'ailleurs le "Forum" nommé "http://www.allhtml.com" qui m'a recommandé d'également me renseigner auprès de vous ^_^)... Je pense que mes premiers pas dans ces deux modes d'éditions m'aideront plus tard pour le véritable site "Web" que j'ouvrirai un jour. Les deux premières pages de mon Espace Perso' ont donc été rédigées en "Wiki" mais compte dorénavant entièrement poursuivre en "HTML" et "CSS"... J'avance tout doucement mais je rencontre, bien évidemment, quelques embuches (^_^)...

Alors ma question "d'inauguration" est aujourd'hui la suivante ( ) :

J'ai un "Background" / "Wallpaper" perso' me tenant à Coeur... Le "souci", c'est qu'il ne s'affiche que parfaitement (j'entends par là : comme je souhaiterais qu'il s'affiche ^_°) sur les moniteurs 17 pouces (4:3) et en résolution 1280 x 1024 (étant effectivement la taille du document à l'origine)... Exemple ci-dessous :

http://i170.photobucket.com/albums/u275/Fury-161_b/Exemple%20pour%20Forums/Cas_a_pour_Alsacreations.jpg?t=1184061834

- Sur les écrans larges (16/9 enfin 16/10), j'ai un bout de page "Web" blanche sur la droite et tout le restant du contenu de la page (texte, image...) se trouve désaxé par rapport au "Background"... Exemple ci-dessous :

http://i170.photobucket.com/albums/u275/Fury-161_b/Exemple%20pour%20Forums/Cas_b_pour_Alsacreations.jpg?t=1184061864

- Sur les écrans 15 pouces (en résolution 1024 x 768 du moins), le "Backround" ne s'affiche pas entièrement et le restant du contenu de la page est également désaxé vis-à-vis de l'arrière plan... Exemple ci-dessous :

http://i170.photobucket.com/albums/u275/Fury-161_b/Exemple%20pour%20Forums/Cas_c_b.jpg?t=1184065446

-> Je suis bel et bien conscient que tout cela est normal en raison des différences de résolutions... mais la question est en définitive la suivante :

N'y-a-t-il pas un moyen d'adapter ce "Background" à tout type de résolutions et de moniteurs par le biais du "CSS" (ou autre moyen) ?... La notion "CSS" nommée "absolute" ne peut-elle pas m'être utile dans ce cas de figure ? Note : avant de rédiger ce message, j'ai bien effectué une recherche... J'ai lu des messages relatifs aux "Backgrounds" mais ne correspondant pas au réel "souci" que je rencontre actuellement...

Pour info', l'écriture "CSS" que j'utilise pour l'insertion de l'arrière-plan et pour le moment est la suivante :

(...)

background-image:url('http://adresse du background');
background-repeat:no-repeat;
background-attachment:fixed;

(...)

Un Grand merci pour votre attention et @ bientôt ( ).

Cordialement et fort sympathiquement,

Fury-161.
Modifié par Fury-161 (10 Jul 2007 - 21:28)

A mon avis la meilleure solution serait de diviser ton image de background en 2 images au niveau de ton aplat noir central et d'ajouter une couleur de fond noir, aligner la 1ere partie de l'image à gauche et la 2e partie à droite.

Bonjour,

Alors déjà, 1280x1024 pour un fond de site internet c'est énorme, je serais toi que je m'arrangerais pour ne pas mettre une image de cette taille.

Maintenant, si tu persistes, tu peux centrer l'image, et ajouter une couleur de fond (ça c'est toujours une bonne idée, pour pouvoir lire le texte blanc au cas où le fond ne s'affiche pas, par exemple parce que le fond est trop gros et que la connexion rame ), comme suit :

[b]background-color: black;[/b]
background-image:url('http://adresse du background');
background-repeat:no-repeat;
background-attachment:fixed;
[b]background-position: center top;[/b]

ou, avec la notation courte :

background: black url('http://adresse du background') no-repeat fixed center top;

Par contre avec les implémentations actuelles de CSS, il n'est pas possible d'adapter la taille de l'image. Sauf à prévoir plusieurs images et utiliser Media Queries (anglais). Pour l'instant seusl Opera et Safari 3 beta et/ou Safari iPhone supportent Media Queries à ma connaissance.
Modifié par Lanza (10 Jul 2007 - 14:53)