Image arrière plan dispatchée

**Mister Shell** · 05/03/2007, 14h44

Bonjour le forum,

j'ai fait une recherche dans mon bouquin de css (celui de J. Zeldman, 2de éd.), dans le forum et dans la faq, mais sans avoir trouvé d'éléments de réponse... alors je me permets de vous demander votre avis !

J'essaie dans une page blanche, de faire que 4 blocs (div) aient chacun une "vue" sur une seule image en fond un peu à la manière d'une feuille de papier dans laquelle on aurait découpé 4 carrés et qu'on applique sur une autre feuille de couleur.
Evidemment, entre les blocs, juste du blanc.

Pour l'instant, j'ai regardé sur la piste de z-index, des positions absolute/relative, mais chou blanc.

Quelqu'un aurait il une piste ? Merci beaucoup d'avance.

**bigboomshakala** · 05/03/2007, 23h28

salut, j'ai pas bien compris ce que tu cherches à faire.
il s'agit de div avec chacun un bout d'une image en fond. ou bien d'une image statique invisible révélée par morceau au passage des div ?

**Mister Shell** · 06/03/2007, 07h54

salut bigboomshakala et merci

il s'agit de divs avec chacun un bout d'une image de fond ;

mais s'agissant d'un site fluide (normalement), si l'utilisateur a une éénooorme résolution (y'en a), les divs vont s'afficher en colonne et non en "carré".
Du coup le bout d'image de fond que chacun affichera sera différent.

Si déjà tu as des pistes pour la première partie, je suis preneur.. car la nuit ne m'a pas apporté conseil ;-)

**Mister Shell** · 07/03/2007, 11h58

en utilisant la propriété

Code :

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

1
2
 
{background-position: [left|right][top|center|bottom|%|px];}

je réussis à tricher et à obtenir l'affichage que je veux en résolution la plus petite.

Mais lorsque je réduis la fenêtre, si mes blocs s'alignent bien les uns sur les autres, leur fond étant "fixé", ça ne rend plus l'effet voulu.

Vous pensez vraiment que ce n'est pas possible en CSS ?

**MasterOfChakhaL** · 07/03/2007, 12h11

salut,

Théoriquement, c'est possible en utilisant la propriété:

Code :

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

background-attachment: fixed;

Cependant, il me semble bien que cela ne fonctionne pas avec ie

**XtoX** · 07/03/2007, 12h15

Si tu connais la position exacte de tes div, tu peux essayer de mettre l'image de fond su r ta div et de la position à l'inverse de ta div.

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Document sans nom</title>
		<style>
			#div1
			{
				position:absolute;
				top:100px;
				left:100px;
				height:100px;
				width:100px;
				background-image:url(monImage.jpg);
				background-repeat:no-repeat;
				background-position:-100px -100px;
			}
		</style>
	</head>
 
	<body>
		<div id="div1">
		</div>
	</body>
</html>

**Mister Shell** · 07/03/2007, 14h10

Envoyé par XtoX

Si tu connais la position exacte de tes div, tu peux essayer de mettre l'image de fond su r ta div et de la position à l'inverse de ta div.

Merci XtoX
c'est que j'ai fait mais ça ne me convient pas à cause du redimensionnement possible pour les utilisateurs "miros" :-)

**Mister Shell** · 07/03/2007, 14h11

Envoyé par MasterOfChakhaL

salut,

Théoriquement, c'est possible en utilisant la propriété:

Code :

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

background-attachment: fixed;

Cependant, il me semble bien que cela ne fonctionne pas avec ie

Merci MasterOfChakhaL,
Je ne connaissais pas cette propriété... je regarde.

**Mister Shell** · 07/03/2007, 14h38

Envoyé par Mister Shell

Merci MasterOfChakhaL,
Je ne connaissais pas cette propriété... je regarde.

arff... bien essayé, mais cette propriété permet de fixer ou non l'image d'arrière plan.
En fait, moi je voudrais faire en sorte qu'elle soit cachée sauf dans des blocs dont le positionnement est liquide (un peu à la manière de calques de fichiers image).

**MasterOfChakhaL** · 07/03/2007, 16h13

Salut,

Cette propriété doit s'appliquer à chacun de tes divs (et tu dois définir la même image).

Pour être sur qu'on parle de la même chose, j'ai fait une petite page de test: http://chakhal.free.fr/test/test.html
Regarde ca avec mozilla ou opéra et joue avec la taille de la fenêtre pour voir ce que ca donne.

Je confirme que ca ne marche pas avec IE (en tout cas, pas avec le 6). Je ne connais pas de contournement...

**Mister Shell** · 08/03/2007, 08h01

Envoyé par MasterOfChakhaL

Salut,

Cette propriété doit s'appliquer à chacun de tes divs (et tu dois définir la même image).

Pour être sur qu'on parle de la même chose, j'ai fait une petite page de test: http://chakhal.free.fr/test/test.html
Regarde ca avec mozilla ou opéra et joue avec la taille de la fenêtre pour voir ce que ca donne.

Je confirme que ca ne marche pas avec IE (en tout cas, pas avec le 6). Je ne connais pas de contournement...

Salut,
Autant pour moi, Ô MasterOfChakhaL ! Merci pour ton lien. En effet, c'est exactement ça.
J'ai fais le test sur IE7 et ça fonctionne.
Le Misérable petit Scarabée que je suis n'ose même pas regarder vos pieds pour s'excuser d'avoir mis en doute vôtre Sainte Parole.
A+

Image arrière plan dispatchée

CSS

Discussions similaires

Partager

Partager