Forum des perles

admin · >05-12-2006 12:43:22

Vous avez été extremement nombreux à me demander comment insérer un effet neige sur votre site (Bon en vrai une seule personne me l'a demandé, c'est Gillou).
Voici un mini tutoriel, vous allez voir que c'est trés simple:

Comment ça marche:
C'est juste une petite image .gif qui représente de la neige, et qui est répétée autant de fois qu'on veut, puisqu'on la place en fond de tableau ou fond de calque.
L'image en question est la suivante:

(clic droit pour l'enregistrer sur votre pc)

Comment mettre un fond d'écran sur mon site?
Précision pour commencer: Vous devez ouvrir vos pages web avec un éditeur de texte, du style Notepad, ou plus perfectionné, pour avoir accès au code source.
On peut trés facilement mettre cette image en fond d'écran sur une pleine page en passant pas la balise body. Je vous déconseille de le faire car le fait de répeter cette petite image sur toute la page va faire ramer l'ordinateur de vos visiteurs. Je vous donne quand même le code au cas où:
Vous devez remplacer la balise <body> par:

Code:

<body style="background-image:url(http://img175.imageshack.us/img175/6158/neigels3.gif)">

Je vous conseille plutôt de mettre la neige sur une petite partie de votre site, par exemple une bannière dans un calque. Voici par exemple un calque intitulé "neige", qui est situé à 100 pixels du bord gauche, à 10 pixels du haut, et qui mesure 790px de large sur 150px de haut:

Code:

<div id="neige" style="width:790px; height:150px; left:100px; top:10px; background: url(http://img175.imageshack.us/img175/6158/neigels3.gif)">
<h1 align="center">Le texte que je veux afficher au milieu de la neige</h1>
</div>

On peut aussi bien mettre cette image de fond dans une cellule de tableau, selon la conception du site.
Voila wink

Annonces · 05-12-2006 12:43:22

Gillou62 · >05-12-2006 12:46:26

Merci Julien, je vais essayer, mais je ne répond de rien LOL

laren · >05-12-2006 12:46:30

zarb j'ai rien compris mais c'est pas grave lol

Gillou62 · >05-12-2006 12:48:29

Il faut que j'aille dans mon administration alors ?????

admin · >05-12-2006 12:57:26

Je ne sais pas comment ca marche avec Oscommerce, mais je pense qu'il serait beaucoup plus simple d'ouvrir directement les fichiers avec ton ftp. Enfin... Ne fais rien que tu pourrais regretter! wink

Gillou62 · >05-12-2006 13:00:16

Oui oui merci je crois que je vais demander au créateur de mon site, j'ai assez de problème comme cela.
En tout cas, merci pour le tuyau !!!

marmotte03 · >05-12-2006 13:01:47

c'est super merci Juju extra

admin · >05-12-2006 13:09:29

Gillou62 a écrit:
Oui oui merci je crois que je vais demander au créateur de mon site, j'ai assez de problème comme cela.
En tout cas, merci pour le tuyau !!!

Ouep, tu viens de louper une vente! http://www.bijouxenperles.com/forum/perles-6205.php lol

Nouch74 · >05-12-2006 13:10:08

admin a écrit:
Gillou62 a écrit:
Oui oui merci je crois que je vais demander au créateur de mon site, j'ai assez de problème comme cela.
En tout cas, merci pour le tuyau !!!
Ouep, tu viens de louper une vente! http://www.bijouxenperles.com/forum/perles-6205.php

lol Je repasserai...

bosco62 · >05-12-2006 13:27:48

c'est super

Dauphine · >05-12-2006 18:00:40

merci Juju

Yolande · >05-12-2006 18:04:09

rien compris encore mais je sais se que Juju va me dire donc ............ langue tongue

lenalex · >05-12-2006 20:14:43

j'ai l'impressions d'etre arrivé sur une autre planete zarb lol lol lol

gabrielle · >05-12-2006 20:37:02

Merci Juju por l'info!!! extra

Ephemer · >05-12-2006 22:03:56

admin a écrit:
On peut trés facilement mettre cette image en fond d'écran sur une pleine page en passant pas la balise body. Je vous déconseille de le faire car le fait de répeter cette petite image sur toute la page va faire ramer l'ordinateur de vos visiteurs.

Et puis franchement c'est agaçant.
(d'autant plus que d'un point de vu professionnel ça fait amateur)

admin a écrit:
Voici par exemple un calque intitulé "neige", qui est situé à 100 pixels du bord gauche, à 10 pixels du haut, et qui mesure 790px de large sur 150px de haut:
Code:
<div id="neige" style="width:790px; height:150px; left:100px; top:10px; background: url(http://img175.imageshack.us/img175/6158/neigels3.gif)">
<h1 align="center">Le texte que je veux afficher au milieu de la neige</h1>
</div>
On peut aussi bien mettre cette image de fond dans une cellule de tableau, selon la conception du site.
Voila

Sans oublier de gérer la superposition avec z-index mais ça c'est selon le contexte.

Dernière modification par Ephemer (05-12-2006 22:04:19)