Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

30.01.2009

Afficher une image d'arrière-plan fixe

Je vous rassure, c'est un discours sur la méthode... pas sur le résultat. Un jour j'aurai le temps d'avoir du goût.

Vous en avez assez des ces aplats de couleur ? Vous voulez de l'image, et de la belle, pour arrière-plan ? Voici comment faire.

Je compte sur votre goût et votre débrouillardise personnelle pour trouver une belle image, que vous utiliserez sans violer son auteur, notamment dans son droit moral. Avant de partir à sa recherche, vous devrez savoir si vous souhaitez un motif répétitif (comme pour un papier peint avec raccord) ou une image unique et suffisamment grande. Et suffisamment grande c'est combien ? C'est... une certaine taille.

Je vois bien que cette première réponse vous déçoit, mais analysons ensemble les données du problème. Vous pourriez considérer que la bonne taille, c'est la votre. Celle de votre écran je veux dire. Je ne suis pas loin de penser que vous avez raison. Mais réfléchissez tout de même à la taille des écrans de vos visiteurs, qui disposent d'affichages différents du votre. Une personne qui visiterait mon site avec une résolution de 800x600 pixels ne verrait pas la moitié de l'image car elle mesure 1280x800 pixels. Si mon image est trop petite, le visiteur verra du blanc à droite et en dessous. Pour une image fixe, il faut bien faire un choix qui ne peut pas contenter tout le monde.

Pour une image répétée, ce problème n'existe pas, puisque précisément, l'image est répétée sur toute la surface affichée. C'est pourquoi nous voyons maintenant l'image fixe, et bientôt l'image répétée (comme dans la colonne de droite).

Afficher une image fixe en arrière plan de la page.

Une fois l'image choisie et modifiée par vos soins, vous la chargez sur le blog via Tableau de bord / Fichiers / Images / UI1. Vous n'avez pas de dossier UI1 ? Mais créez le donc pour y enregistrer les différentes images de "User Interface 1". Vous pouvez l'appeler Guernica ou Catherine_de_medicis si vous voulez, cela vous regarde.

Ensuite, vous allez modifier la feuille de style, en allant sur Présentation / Configuration avancée / Feuille de styles et Modifier le template.

RAPPEL : Il n'y pas de sauvegarde de la feuille de style, soyez prudents.
- Copiez le contenu et enregistrez le dans un fichier en mode texte avec l'extension .CSS
- Commentez vos interventions dans la feuille de style en utilisant les balises /* commentaire */
- D'ailleurs plutôt que de supprimer les paramètres existants, vous les encadrerez de balise de commentaire pour les neutraliser. Il vous sera plus facile de faire marche arrière.

Vous pouvez accéder à la feuille de styles pour geemee.hautetfort.com en cliquant ici.

Il faut intervenir sur l'élément "body", celui qui se situe au plus haut niveau.

Le code de body est maintenant :

body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #FFFFFF;
/*** mon arrière plan >>> ***/
background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") /** repeat-y 0% 0% **/ ;
background-repeat: no-repeat ; background-attachment:fixed;
/*** <<< mon arrière plan ***/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

background-color: #FFFFFF; indique la couleur à afficher, sous l'arrière-plan. C'est utile quand l'image est plus petite que l'espace d'affichage.

background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") indique l'adresse de l'image d'arrière-plan.

/** repeat-y 0% 0% **/ est contradictoire avec notre objectif de non répétition, je l'ai donc mis en commentaire.

background-repeat: no-repeat ; impose la non répétition de l'image, même si elle devait être trop petite.

background-attachment:fixed; permet de fixer l'image, elle ne défilera pas avec le texte.

Seul le code entre /*** mon arrière plan >>> ***/ et /*** <<< mon arrière plan ***/ a été ajouté.

Le code de #container est devenu :

#container {
line-height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
text-align: left;
/***neutralisation >>***
background: #aaaaaa url("http://static.hautetfort.com/backend/graphics/design/preview/set8/cab22a/f_general.gif") repeat-y 0% 0%; *** << neutralisation ***/
width: 988px; /* IE 5 */
}

J'ai neutralisé l'arrière plan de #container, pour que l'image f_general.gif ne vienne pas recouvrir l'arrière-plan.

Et voilà ! La prochaine fois, nous verrons l'image répétée, ou en mosaïque.

Commentaires

Bonjour Gee Mee,

Merci pour l'info.

Votre image de fond est un exemple, peu importe le fond, c'est le contenu de votre article que vous mettez en avant, d'accord.

C'est original une image mais...

Mon regard est attiré vers l'image de fond et cela peut gêner pour parcourir les écrits.

C'est beau mais attention, une image en fond peut nuire au blog.

Donc, je pense que c'est à utiliser en ayant conscience de cela avant de faire le choix de l'image ou non.

Ce serait bien que d'autres lecteurs donnent leur avis sur ce sujet.

Bonne journée

Écrit par : Gilles | 30.01.2009

Répondre à ce commentaire

@ Gilles : Votre réflexion ne manque pas de fond. Si je puis dire ;-)

Écrit par : Gee Mee | 30.01.2009

Répondre à ce commentaire

Ha, Ha, Ha, bien vu Gee Mee !!!!

Ni de forme !!!!

Je vois d'ailleurs que vous la tenez !!!!

Écrit par : Gilles | 30.01.2009

Répondre à ce commentaire

Bonjour, tout d abord merci pour ce super blog

J ai suivi vos conseils avec les codes suivants

body{
font-family:Arial, sans-serif;
font-size:105%;
word-spacing:normal;
background-color: #FFFFFF;
/*** mon arrière plan >>> ***/
background: url("http://i48.tinypic.com/ifua81.jpg") /** repeat-y 0% 0% **/ ;
background-repeat: no-repeat ; background-attachment:fixed;
/***

Écrit par : vero | 09.02.2010

Répondre à ce commentaire

Bonjour Véro, je vous remercie de votre commentaire.
Vous avez certainement changé d'avis depuis que vous avez laissé ici votre code, j'ai constaté que l'image de fond était répétée. Je vous invite à la centrer dans la largeur, pour ajuster l'apparition du motif par rapport au cadre du conteneur. Cela vous obligera sans doute à modifier l'image d'origine aussi.
Faites moi signe si vous rencontrez des difficultés.
Bonne continuation !

Écrit par : Gee Mee | 10.02.2010

Les commentaires sont fermés.