<hier>WEBLOG</hier>

Mercredi 21 Juin 2006 | link |

Plusieurs background-image dans la même page

Pour répondre à plusieurs personnes en même temps : oui, on peut mettre plusieurs images de fond dans la même page.
Cela dit, il faudra adapter à chaque besoin, même si le principe de base reste le même : il faut faire plusieurs cadres avec, pour chacun, une image.

Prenons l'exemple d'une image (houx2.gif) placée aux quatre coins de la page. On va définir quatre cadres (hg, hd, bg, bd), puis leur attribuer un background-position adéquat pour que les images se placent aux quatre coins.
Les marges définies dans le cadre contenu sont précisées en fonction de la taille de l'image pour ne pas que le texte empiète dessus.

Code CSS

 #hg, #hd, #bg, #bd {
  background-repeat:no-repeat;
  background-image:url(houx2.gif);
  }
  #hg {
background-position:top left;
  }
  #hd {
background-position:top right;
  }
  #bg {
background-position:bottom left;
  }
  #bd {
background-position:bottom right;
  }
  #contenu {
  margin-left:100px;
  margin-right:100px;
  }
  #contenu p {
  text-align:justify;
  }

Code (x)html

<div id="hg">
 <div id="hd">
  <div id="bg">
   <div id="bd">
    <div id="contenu">
    <h1>Les quatre coins</h1>
    <p> [bla bla]</p>
    </div>
   </div>
  </div>
 </div>
</div>

Voir le résultat

Attention tout de même à ne pas trop abuser de la méthode, trop de cadres tuent les cadres...

Quizz musical

L'idée vient de Michel, et pour la fête de la musique c'est l'occasion.
Le principe est simple : écouter le fichier, trouver les auteurs des 10 extraits. Au menu : du classique, du folk, du rock, du psychédélique, du dub... (Ah oui, j'ai des goûts très éclectiques !)

A vous de jouer !

Et pour ceux pour qui le lecteur flash ne fonctionne pas, vous pouvez aussi télécharger le fichier : quizz.mp3

Et j'oubliais : réponses samedi ! ;)

Les réponses

  1. Robert Plant - Brother Ray - (Mighty Rearranger) -Trouvé par Gaëlle-
  2. Mike Oldfield - Crises -Trouvé par Gaëlle-
  3. Roger Waters - Late Home tonight (Amused to death)
  4. Graëme Allwright - La ligne Holworth (Le jour de clarté)
  5. William Sheller - Un homme heureux -Trouvé par Garfieldd-
  6. Beethoven - Symphonie n°7 - 2ème mouvement "Allegretto" -Trouvé par Garfieldd-
  7. Zenzile - Simple Lesson (Motus Vivendi) -Trouvé par Gaëlle-
  8. Eloy - Horizons (Colours)
  9. Neil Young - The needle and the damage done (Harvest) -Trouvé par Garfieldd-
  10. Pink Floyd - Echoes (Meddle)

en 5 : W. Sheller, Un homme heureux
en 6 : Beethoven, extrait de la symphonie n°7 (et accessoirement musique du film Zardoz de John Boorman
en 9 : Neil Young, The needle and the damage done
Pour le reste, je sèche...

Garfieldd - 21-06-2006 - 20:36

3 sur 10, bravo ! Je pensais que vous trouveriez aussi le 4 sans trop de problèmes ;-)

Pascale - 21-06-2006 - 21:35

CSS3 prévoit d'autoriser les backgrounds multiples pour un même div...

On l'aura dans quelques années...

Olivier G. - 21-06-2006 - 22:42

ouiiiiiii, le temps que les navigateurs l'implémentent... dans une petite dizaine d'années ce sera bon ;-)

Pascale - 21-06-2006 - 22:46

Le 4 ressemble à l'intro d'une chanson de Maxime LeForestier... Non ?

Garfieldd - 22-06-2006 - 09:01

Non, ce n'est pas ça, mais ça chante en français effectivement.

Pascale - 22-06-2006 - 09:26

Grrrrrr, mais qu'est-ce qu'ils font encore chez free ! "Fonction mail is down" et la fonction time débloque d'une heure !
Bon, bref, ça n'empêche pas de faire des commentaires..

Pascale - 22-06-2006 - 09:30

Moustaki ?

Garfieldd - 22-06-2006 - 09:49

Non, moins barbu.

Pascale - 23-06-2006 - 00:33

1)Robert Plant((par contre le titre de la chanson je ne le sais pas :-p))
2)Mike Oldfield((idem que pour Robert Plant je sais pas le titre))

gaelle((ta fifille a toi)) - 23-06-2006 - 11:12

Trop facile pour toi ! ;-)

Pascale - 23-06-2006 - 11:41

7)zenzile

gaelle - 23-06-2006 - 12:19

Of course. A noter que sur leur site (hélas en flash) on peut écouter tous leurs morceaux..

Pascale - 23-06-2006 - 16:30

La 4 ne serait pas : Pourquoi les gens qui s'aiment de ... Oups, je sais plus qui !!

Jérémie - 23-06-2006 - 22:00

Arf, le béta que je suis à fait 2 minutes de google pour se rendre compte que :
De 1 : je parlais de la 5
et de 2 : ça fait 10 ans que tout le monde l'a trouvé :P

Jérémie - 23-06-2006 - 22:02

Impressionnant tout ce que j'apprend sur ce site.
C'est décidé, plus de tableaux (enfin... moins), que du CSS.
Et merci pour tous ces bons conseils

Jérémie - 23-06-2006 - 22:08

;-)

Alors, rapidement les réponses en attendant de mettre les détails des titres :
3. Roger Waters
4. Graëme Allwright (tout simplement ;) )
8. Eloy (ça il faut connaître...)
10. Pink Floyd

Pascale - 24-06-2006 - 09:19

Pas de regret pour G. Allwright, je ne connaissais pas.
En revanche, pour Pink Floyd, chuis honteux !

Garfieldd - 24-06-2006 - 22:12

ohhh, non, je n'y crois pas ! "Sacrée Bouteille" vous ne connaissez pas ? "Suzanne" ? (texte L.Cohen) "Qu'as-tu appris à l'école" ? "Le jour de clarté" ? "Jusqu'à la ceinture" ?

Non !!?? Il faut vite réparer cela :
http://www.amazon.fr/gp/product/B00000I2KU/402-1056347-9218535?v=glance&n=301062
;)

Pascale - 24-06-2006 - 23:30

Damned !! Grosse grosse grosse bêtise de la part de gandi qui vient de me détruire mon nom de domaine !!
Résultat, pas mal de dysfonctionnement sur le site... :-(

Pascale - 26-06-2006 - 11:52

Le temps que je poste le précédent commentaire, et voilà les choses rétablies. Bravo Gandi pour la réactivité.

Ouf, je respire..

Pascale - 26-06-2006 - 11:53

| Laisser un commentaire |

| Index | Avant | Archives |