Fixer une image en PREMIER plan

**ldoud** · 03/03/2007, 01h58

Bonjour, je souhaiterais savoir s'il est possible de fixer (en css) une image sur le premier plan de la page. Je m'explique : Je sais la fixer en arrière plan grace à l'instruction background-attachment: fixed; mais je n'ai pas trouvé de fonctionnalité pour faire l'inverse, c'est a dire que le texte de la page passe sous l'image.
Je voudrais faire un bandeau en bas de ma page pour que le texte défile en dessous.

Si vous avez une idée, merci de me faire signe.

**ChriGoLioNaDor** · 03/03/2007, 07h41

En fait, sauf erreur de ma part, ce n'est pas prévu pour : les images que tu mets dans le CSS, c'est justement les arrière-plans!

Mis à part ça, ce soit être possible en utilisant la propriété z-index. Tu pourrais créer un div contenant ton image, que tu mettrais en premier plan, et un second div avec ton texte, que tu mettrais derrière... Mais bon, je n'ai pas testé, et de plus je ne vois pas l'intérêt de cacher du texte avec une image (si on ne voit pas le texte, pourquoi en mettre

J'espère t'avoir donné une petite piste de réflexion...

**cynthoy** · 03/02/2009, 18h57

Moi aussi j'essaie de trouver une solution ...
Voici ce que j'essaie de faire (pour que ca soit plus clair ! ) :

Simplement, j'ai mis une icône en bkg-fixed à laquelle j'ai ajouté un lien pour retourner directement à la page d'accueil.
Seul problème avec cette façon, c'est que dès que l'on descend dans la page, toutes les autres images passent par-dessus, et du coup, mon icône "home" devient inaccessible ...
J'reviendrai dès (si) que j'aurai trouvé une réponse !

ps, si vous avez trouvé une solution entre temps, merci de faire partager

**StAfX** · 03/02/2009, 23h55

et comme ça :
(@cynthoy)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
/* pour toutes les images */
img {
   z-index: 1;
}
 
#id_de_ton_image_premier_plan {
   position : fixed;
   z-index: 2;
}

je pense que ça devrait marcher...

**GihefBey** · 04/02/2009, 19h03

Bonjour,

Le positionnement en fixed devrait suffire.
Par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #cd853f;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      text-align: left;
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    #indexmax {
      position : fixed;
      bottom : 0;
      width : 760px;
      text-align: center;
      }
    </style>
</head>
<body>
  <div id="conteneur">
... contenu ...
    <div id="indexmax"><img src="img.png" /></div>
  </div>
</body>
</html>

Mais IE n'en tient pas compte.
Il faut lui enfoncer le clou.
Voyez http://xhtml.developpez.com/faq/?pag...ans_javascript

Si vous voulez d'autres solutions, avec ou sans Javascript, envoyez-moi un MP.

--

**StAfX** · 04/02/2009, 21h26

Si vous avez d'autres questions sur ce sujet posées les dans le forum !!

les problèmes ne se résolvent pas par mp !!cf ici

est-ce que la position fixed vous convient ?

**cynthoy** · 06/02/2009, 13h21

yey ! ca marche niquel ! merci !

en fait je ne connaissais pas cette propriété z-index... j'ai essayé avec le chiffre 1 et ca marche ! plus de problème de ce coté la.

Pour résumer à ceux qui aurait du mal à visualiser le truc, jmet un ptit bout de code :

-------------------------------------------------------------------
xhtml:

<div id="home"><p><a href="index.html"><img src="images/home.png" alt="home" title="HOME" /></a></p></div>

CSS :

#home {position:fixed;bottom: 10px;right: 20px; z-index:1;}

----------------------------------------------------------------

Voilà ! je n'ai pas encore bien compris la notion de z-index,,, mais j'ai pas encore bien eu le temps d'approfondir la question.

J'espère que ça pourra aider certains car je trouve que cette façon est vraiment très pratique pour faire des "liens images" cliquables sans mettre de texte... vraiment plus esthétique dans certains cas ...

Merci encore à tous !

**rouzi** · 01/06/2010, 18h19

Envoyé par StAfX

Si vous avez d'autres questions sur ce sujet posées les dans le forum !!

les problèmes ne se résolvent pas par mp !!cf ici

est-ce que la position fixed vous convient ?

Bonjour,

Pour éviter le problème avec IE il suffit de mettre :
position: absolute;
z-index:1;

J'espère que ca va vous aider

Fixer une image en PREMIER plan

CSS

Discussions similaires

Partager

Partager