18073 sujets

Questions générales et questions de débutants

Problème d'affichage sous Firefox BG scroll image fixe

Bonjour
Est ce que quelqu'un aurait déjà rencontré ce cas. Sous Firefox l'image de fond disparaît quand je demande un no-repeat et une position. Le but c'est d'avoir une image de fond en haut à droite en fond qui reste fixe quand on scroll.
Le texte serait à gauche dans le <p>


.bgfixe {
	background: url(../images/image.gif) top right no-repeat;
	background-attachment: fixed;
	background-color: #F5F5F5;
	border: 1px solid #000000;
	margin-left: 0 0 0 0;
	width: 554px;
	height: 310px;
	overflow: auto;
}

.bgfixe p {
	padding-right: 185px; padding-left: 15px; margin: 0px; padding-top: 20px; 
	font: normal 11/15px Arial, Helvetica, sans-serif; color: #000
}

Modifié par Biscotte (23 Jun 2005 - 16:41)
Bonjour, pourrais-tu mettre ton code dans les balises appropriées comme indiqué dans les règles du forum stp ?
Administrateur
Salut Biscotte,

Je me dois de te rappeler que les Règles du forum t'invitent à afficher correctement et lisiblement tes exemples à l'aide des boutons de [ CODE].
Merci de modifier ton message en conséquence Smiley cligne
Bonjour Biscotte Smiley smile

Pense à utiliser la balise "Code" quand tu mets du code dans un post Smiley cligne stp !

Je ne suis pas sur de la syntaxe ci-dessous, mais essai d'ajouter un "fixed"

background:url(../images/image.gif) no-repeat fixed top right;

Modifié par dominique (23 Jun 2005 - 16:34)
Raphael a écrit :
Salut Biscotte,

Je me dois de te rappeler que les Règles du forum t'invitent à afficher correctement et lisiblement tes exemples à l'aide des boutons de [ CODE].
Merci de modifier ton message en conséquence Smiley cligne


oups vraiment mille excuse, je vais regarder les règles de plus près.
J'ai commandé le livre de chevet sur les CSS mais il n'est pas encore arrivé...normal, mon règlement parti hier soir!
dominique a écrit :
Bonjour Biscotte Smiley smile

Pense à utiliser la balise "Code" quand tu mets du code dans un post Smiley cligne stp !

Je ne suis pas sur de la syntaxe ci-dessous, mais essai d'ajouter un "fixed"

background:url(../images/image.gif) no-repeat fixed top right;


Merci mais ça ne marche toujours pas !
Biscotte a écrit :


Merci mais ça ne marche toujours pas !


... je reviendrai un peu plus tard pour voir si quelqu'un a la solution. Merci!
Macpom a écrit :
Un lien pour les images figées en arrière plan :
http://batraciens.net/css-astuces/zone-fixe-4.htm


Mais le problème c'est que soit ça marche sous IE soit sous Firefox en bidouillant, mais jamais les 2. Par exemple en mettant une position en px au lieu de top right, sous Firefox ça reséoud le problème mais du coup sous IE ça scroll l'image.

Ah non, tiens, je crois que ça marche sous les 2 en mettant une position en pixel. Je vais faire ça un peu plus propre pour voir. Merci déjà pour ces infos
Bonjour

essaye ça

body {
	background-image: url(ton_image.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body p {
    font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	padding-right: 185px;
	padding-left: 15px;
	margin: 0px;
	padding-top: 20px;
}

Smiley cligne
Michel a écrit :
Bonjour

essaye ça

body {
	background-image: url(ton_image.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body p {
    font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	padding-right: 185px;
	padding-left: 15px;
	margin: 0px;
	padding-top: 20px;
}

Smiley cligne


Oui mais c'est pas tout à fait adapté au problème présenté.
Par contre effectivement, ça marche sous les 2 quand on utilise la position en px au lieu de top right au bottom etc.

Par exemple :

	background-position:334px 0px;
	background-repeat:no-repeat;
	background-attachment: fixed;
Biscotte a écrit :


Oui mais c'est pas tout à fait adapté au problème présenté.
Par contre effectivement, ça marche sous les 2 quand on utilise la position en px au lieu de top right au bottom etc.

Par exemple :

	background-position:334px 0px;
	background-repeat:no-repeat;
	background-attachment: fixed;


Finalement ça ne marche pas vraiment en cas concret car dès que l'on positionne ça dans la page, le positionnement en px se fait par rapport au haut de la page !! Evidemment ?
Bonsoir

Si j'ai bien compris tu veux une image fixe en haut à gauche et un menu
qui défile à la droite de ton image.
As tu un lien pour me montrer un exemple, sinon essaye encore ce truc

<!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>
<title>Biscotte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	background-image: url(images/cadre.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top: 0px;
}


.menu{
	border:1px solid #000000;
	height:100%;
	width: 50%;
	margin-top: 0px;
	margin-left: 400px;
}
</style>
</head>

<body>

<div class="menu">
  <p>aaaaaaaaaaaaaaaaa</p>
   <p>aaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaa</p>
	 <p>aaaaaaaaaaaaaaaaa</p>
	  <p>aaaaaaaaaaaaaaaaa</p>
	   <p>aaaaaaaaaaaaaaaaa</p>
	    <p>aaaaaaaaaaaaaaaaa</p>
		 <p>aaaaaaaaaaaaaaaaa</p>
		  <p>aaaaaaaaaaaaaaaaa</p>
		   <p>aaaaaaaaaaaaaaaaa</p>
		    <p>aaaaaaaaaaaaaaaaa</p>
			 <p>aaaaaaaaaaaaaaaaa</p>
			  <p>aaaaaaaaaaaaaaaaa</p>
			   <p>aaaaaaaaaaaaaaaaa</p>
			    <p>aaaaaaaaaaaaaaaaa</p>
				 <p>aaaaaaaaaaaaaaaaa</p>
				  <p>aaaaaaaaaaaaaaaaa</p>
				   <p>aaaaaaaaaaaaaaaaa</p>
				
 
</div>
</body>
</html>

Smiley confus
Michel a écrit :
Bonsoir

Si j'ai bien compris tu veux une image fixe en haut à gauche et un menu
qui défile à la droite de ton image.
As tu un lien pour me montrer un exemple, sinon essaye encore ce truc

En fait si tu vas voir à cette URL il y a exactement la solution et tu comprendras par la même occasion ce que je cherche à faire. Je vais l'adapter à mes besoins.

openweb.eu.org/articles/overflow_fond_fixe/
Merci en tout cas.
Sujet clos
Aller à