28220 sujets

CSS et mise en forme, CSS3

2 images en background fixe [resolu]

Bonjour

J'ai grace à l'aide des participants d'alsa résolu un problème.

Mais voilà, dans le même contexte des deux images en background
un autre soucis se profile.

Je n'arrive pas a fixer ces fonds. Smiley confus 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>backgrounds fixes</title>
<style type="text/css">
<!--
html{
	background-image: url(bg01.jpg);/**image répétitive 14x10**/
	
}
body{
	font-size:62.5%;
	padding:0;
	margin:0;
	background-image:url(bg-index.gif);/**image fixe 108x1600**/
	background-repeat:no-repeat;
	height:108px;
	
}
.global{
        width:80%;
	padding:0;
        margin:0 auto 0 auto;
	border:1px solid #000000;
}

.haut{
	height:103px;
	border-bottom:4px solid #FFF;
	background-color: #CCCCCC;
}
.menu{
        height:30px;
}
.gauche{
	width:70%;
	float: left;
}
.droite{
	width:30%;
	float: left;
}
.bas{
	clear: both;
}
-->

</style>
</head>

<body>
<div class="global">
<div class="haut">A</div>
<div class="menu">B</div>
<div class="gauche">
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
<p>z</p>
</div>
<div class="droite">D</div>
<div class="bas">E</div>
</div>

</body>
</html>


merci

@+
Modifié par Michel (28 Oct 2005 - 21:15)
Bonsoir

background = fond = arrière plan, désolé d'avoir francisé.

how to fix the backgrounds ? please

thank you

@+
Modérateur
Bonjour Michel,

Smiley pelle

Je crois que tu pourrais être plus clair. Le dire en anglais ou en français ne change rien. Je n'ai pas compris ce que tu voulais dire par fixé les fonds. Tu peux me le répéter en espagnol ou en italien, ca n'y changera rien. Smiley cligne

Est-ce que tu parles de la propriété CSS


background-attachment: fixed


Merci d'essayer d'être plus clair parce que là, à moins d'avoir une boule de cristal ou un niveau télépathique élevé, c'est pas évident.
Modifié par Merkel (28 Oct 2005 - 19:05)
Bonsoir Merkel

Un peu d'humour ne nuit pas Smiley lol

j'ai deux images en fond comme tu as pu le constater.
Une dans le html répétée et une dans le body non répétée.

J'aimerais que ses images de fond restent figées quand je fais défiler la partie ".global" .

Si "background-attachment:fixed" fonctionnait ce serait merveilleux.
Mais dans cette situation c'est caduque.


Merci

@+
Modérateur
Bonjour Michel,

J'ai testé en changeant tes déclarations pour html et body comme suit :

html{
background-image:url(bg01.jpg);/**image répétitive 14x10**/
background-attachment:fixed;
}
body{
font-size:62.5%;
padding:0;
margin:0;
background-image:url(bg-index.gif);/**image fixe 108x1600**/
background-repeat:no-repeat;
background-attachment:fixed;
}


Ca fonctionne bien dans Firefox, mais IE ne fait que respecter la propriété fixed de l'élément body. Tu remarqueras que j'ai retiré ton height:108px; de ton body. Au fait, ca servait à quoi ?

J'imagines que tu recherche une solution qui fonctionne parfaitement sur IE aussi ? Si c'est le cas, j'y replongerai à nouveau. Smiley smile
Modifié par Merkel (28 Oct 2005 - 20:06)
Modérateur
En cherchant sur google, je suis tombé sur un texte disant :

a écrit :

Positionnement fixe d'images de fond
* IE pour Windows ne sait pas interpréter le background-attachment:fixed sur autres balises que la balise <body> (corps de page).

On ne peut donc pas fixer à l'écran la position d'un fond autre que celui qui est contenu dans cette balise-là.
Cela limite à 1 le nombre de fonds immobilisés qu'il est possible de voir dans IE.


Si tu veux deux backgrounds fixed sur IE, à mon avis, il faudra se tourner vers un bidouillage javascript de luxe.
Modifié par Merkel (28 Oct 2005 - 20:10)
Bonsoir

Merci beaucoup Merkel pour t'être penché sur mon soucis.
On va donc bien sagement trouver une autre solution.

Et puis on va dire que c'est résolu.

a écrit :
* IE pour Windows ne sait pas interpréter le background-attachment:fixed sur autres balises que la balise <body>


@+
Sujet clos
Aller à