image de fond correspondant a la resolution

obtenir ces boutons

Adapter automatiquement l'image de fond à la résolution de l'écran

Comme pour cette page, on peut AJOUTER UN ARRIÈRE-PLAN QUI S'ADAPTE AUTOMATIQUEMENT A LA RÉSOLUTION DE L’ÉCRAN.

ON VERRA AINSI TOUJOURS LA TOTALITÉ DE L'IMAGE, QUELLE QUE SOIT LA RÉSOLUTION DE L’ÉCRAN.

Ce n'est pas le cas avec l'instruction "'background" :
- soit (en cas de faible résolution) une partie seulement de l'image est visible ;
- soit (en cas de forte résolution) l'image est trop petite et un bord apparaît autour de l'image.

Ce gadget ne fonctionne pas sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger.

Le code à ajouter dans la version HTML d'un message (on pourrait aussi l'ajouter pour tout le blog dans un gadget HTML/JavaScript) est le suivant :

<img src="http://4.bp.blogspot.com/-GYBlessfwRg/T1izGtdHMoI/AAAAAAAABNI/e5_DKDkjHGk/s1600/combi.JPG" style="position:fixed; left: 0px; top:0px; z-index:-1;width: 100%;"/>

L'image utilisée a été sauvegardée avec le format "JPEG".

Comment ajouter un gadget HTML/JavaScript sur un blog.

Remarque : avec certains templates récents de Blogger, la position en haut à gauche fixée dans un message n'est plus déterminée par rapport à l'écran mais par rapport au message. Le code précité doit donc exclusivement y être placé dans un gadget HTML/JavaScript.

Autre page à consulter : adapter automatiquement un blog à la résolution des écrans : cliquer ici.

* * * * *
Une astuce : l'outil de création de modèles de Blogger fournit des images de grande taille à placer en arrière-plan du blog. On ne peut voir qu'une partie de ces images.

On peut les voir entièrement quelle que soit la résolution de l'écran, en appliquant la méthode expliquée sur cette page.

Cela a été effectué sur cette page mais également sur la page d'accueil et les pages suivantes.

Pour réaliser cela, il faut :
- cliquer avec le bouton droit sur l'image de fond ;
- choisir "Afficher l'image de fond" ;
- copier l'image ;
- si on le souhaite, réduire sa taille de 50 % en largeur et en hauteur (par exemple avec le logiciel "Paint"), sinon le premier chargement de l'image sera plus lent, mais seulement pour le premier écran ;
- sauvegarder l'image sur le disque dur en format JPEG ;
- ajouter l'image dans un message du blog ;
- récupérer l'adresse (http://...) de l'image sauvegardée et la coller dans l'instruction :
<img src="http://4.bp.blogspot.com/-GYBlessfwRg/T1izGtdHMoI/AAAAAAAABNI/e5_DKDkjHGk/s1600/combi.JPG" style="position:fixed; left: 0px; top:0px; z-index:-1;width: 100%;"/>.

* * * * *
Consulter également : Fond d'écran : images de fond défilantes

Modèles d'images de MAYBAYBUTTER. Fourni par Blogger.

8 commentaires:

Fred a dit…

Et a quel endroit doit on placer ce code dans le code html du template ?

Meiser a dit…

Bonjour.

Pour tout le template, placer le code dans un GADGET HTML/JavaScript.

Pour un seul message, placer le code dans la version HTML de ce message.


Ophel et Eti a dit…

Bonjour,

J'ai un soucis. Cela fonctionne parfaitement sur Chrome ou encore Safari mais pas sur IE. Lorsque la page s'affiche on ne voit que mon image de fond et plus le contenu de mob blog. Que dois-je faire ?

Merci d'avance : )

Meiser a dit…

Bonjour.

Ce gadget ne fonctionne pas sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger.


Thomas a dit…

Bonjour,

Comment faire pour que le fond défile en même temps que les messages?

Mon image étant plus longue que l'écran, on ne voit jamais le bas du coup...

Merci d'avance !!

Meiser a dit…

Bonjour.

1) En créant une image composée de trois parties et en utilisant ce gadget, vous devriez arriver au résultat souhaité.

2)Pour faire défiler l'image de fond, supprimer "position:fixed". Mais si les messages sont trop longs, on ne verra plus l'image à la fin des messages.


Mrs. Patatou a dit…

Bonsoir!
Alors moi j'ai une petite question. J'ai créé une image de fond très grande pour qu'elle puisse s'ajuster même aux plus grandes résolutions d'écrans mais quand je la met dans mon code html elle n'est pas centrée, je veux dire par là que du coup le titre de mon blog que j'ai intégré dans mon fond d'écran n'est pas centré sur ma propre résolution d'écran! Est-ce qu'il n'y a pas possibilité de faire en sorte que le fond soit toujours centré pour que tout le monde puisse avoir les éléments au bon endroit?

Merci beaucoup d'avance!!

Meiser a dit…

Bonjour.

Normalement, l'image est centrée et s'affiche avec un bord de chaque côté, au-dessus en en-dessous.

On ne voit pas le titre.

Ajouter "top" dans le code pour que l'image soit affichée depuis le dessus.