<hier>Février 2005 _</hier>

02 | 14

Mercredi 02 février 2005 | link |

La tête dans le sac

Je n'en peux plus : le décès de ma grand-mère, les élèves odieux, le collègue sympa qui susurre ah, mais y'a que toi qui a des problèmes... (ben voyons), les hésitations de l'encadrement, les nuits qui ne réparent pas la fatigue...
Ras-le-bol !

Heureusement la fin de semaine est proche, le bruit des remontées mécaniques se fait plus précis.
Vite, vite ! Les cimes, la tartiflette, le saucisson fumé, le couinement des pas dans la neige, le repos !

Hommage à Marie

quatre générations
Octobre 2002 - Quatre générations

A force, on s'imaginait que tu ne nous quitterais jamais, mais tu vois le Bon-Dieu ne t'avait pas oubliée, il a simplement mis 97 ans avant de s'occuper de toi.
Mon souvenir est ta petite main frêle et douce, ta bonne humeur... et tes ronflements quand nous dormions ensemble lorsque j'étais enfant ;-)
Dors maintenant en paix ma petite mémée...

Haut de page

Lundi 14 février 2005 | link |

background-image

Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page html, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE.
Avec les feuilles de style on peut obtenir beaucoup plus !

Petits avertissements préliminaires :

Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 53 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.

Code de base

L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.
Pour le corps de page, la syntaxe CSS de base sera celle-ci : 

body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
}

color renseigne la couleur de la police de caractère, background-color est de la couleur de fond de page ; background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.
Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

» Visionner l'exemple

Fond de page fixe

Pour que le fond de page devienne fixe, on rajoutera dans le code :

background-attachment:fixed;

» Visionner l'exemple

Positionner l'image

On peut aussi empêcher la mosaïque et positionner l'image dans une partie très précise de l'écran.
Par défaut, l'image se positionne en haut à gauche de l'écran :

body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
background-repeat:no-repeat;
}

» Visionner l'exemple

Exemple positionnement 1

Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :

background-position:right top;

ou :

background-position:100% 0%;

» Visionner l'exemple

Exemple positionnement 2

Pour une position au centre de la page, cela donnera :

background-position:center center;

ou :

background-position:50% 50%;

» Visionner l'exemple

Exemple positionnement 3

Pour une position en bas à droite :

background-position:right bottom;

ou :

background-position:100% 100%;

» Visionner l'exemple

Remarques

merci pour ce site magnifique ça fait plaisir de trouve des sites comme ça mais il ya pas trop en plus si tu veux savoir des trucs forte tu doit pays.
merci encore :)

billal - 15-02-2005 - 18:54

Et on pourrait même ajouter que dans cette page, l'ordinateur en haut à gauche qui reste fixe est une image de fond définie dans la feuille de style pour le body... bon exemple!!

denis - 16-02-2005 - 14:29

Merci Billal :-)

Oui, effectivement Denis, la photo de l'ordinateur est un parfait exemple. Celle du panorama de la montagne juste au-dessus des commentaires aussi. C'est un fond de page : j'ai choisi cette option pour que ce soit l'image qui s'adapte et non la fenêtre (ça évite les ascenceurs horizontaux). Bien sûr, un petit écran voit moins de paysage qu'un grand, mais ce n'est pas grave.
Pour voir ce panorama en entier :
http://mammouthland.free.fr/jardin/village/nature/montagne/images/panorama2.jpg

Pascale - 16-02-2005 - 21:55

Ouah très bien tout ça même si ça me sert pas vu que j'utilise le CSS depuis des lustres :) mais c'est clair concis précis ! Un truc que j'aime beaucoup (rien à voir avec les arrière-plans tu me diras) c'est les position:fixed; - IE connait pas - qui remplacent les frames de façon tout à fait impressionnante... hé hé ...

ClemSat - 17-02-2005 - 21:10

Ah bon,il faut ça aussi IE ? ;-)
Etonnant que nous n'ayons pas le droit à ça aussi à KL :D

Pascale - 18-02-2005 - 10:05

C'est trop cooooooooooooooooooool !!!!!!
Encore ! Encore ! des sites comme ca !

Beuls - 19-02-2005 - 18:14

tres biens tes explications et surtout le petit exemple tout de suite en dessous c 'est encore plus cool
hasta pronro

tito elcubano - 22-02-2005 - 15:21

trés beau site, je vais essayer de convertir des à present mes tableau super lourd en petit fichier CSS... je connaissait le basique, mais pas tout ça, merci, c'est claire, nette.. rien à redire sauf peut être des fautes de frappes (j'en ai vu deux...) mais je n'ai moi même rien à dire à ce sujet :D

Sailx - 25-02-2005 - 19:15

quel plaisir!

neaufit - 10-03-2005 - 22:13

Merci à tous ! :-)

Pascale - 13-03-2005 - 20:23

perso :
de pascal à pascale,je me demandais pourquoi l'esprit de ce site me plaisais tant, la rèponse est : MSMA
++

neaufit - 15-03-2005 - 21:30

Merci beaucoup pour ce site clair, net, et bourré de choses intéressantes.

Quelle joie pour les novices comme moi !
:o))

JRV - 25-03-2005 - 00:56

Haut de page

| Index | Archives | « Janvier 2005 | Avril 2005 » |