[Résolu] Background-attachment scroll ou fixed rien ne change !

Bonjour,

J'ai une image de background faisant 1200px de large et 1141px de hauteur pour mon background que j'applique sur body.

Je veux que cette image défile quand je descend de la page car le header ne doit pas se voir sur le footer. Or avec mon code l'image reste toujours à la même place que je mette background-attachment: fixed ou background-attachment: fixed;

Avez-vous une idée pourquoi mon image ne reste pas fixe en haut du body ?

D'ailleurs je ne sais même pas si il me faut mettre scroll ou fixed pour faire ce que je veux !
Par exemple sur www.commentcamarche.net le background suit en même temps que l'on descend je veux faire pareil sur mon site. Mais fixed ou scroll rien ne change.

body {
	height: 1141px;
	background: url('images/background.jpg') no-repeat;
	background-attachment: fixed;
	}

Modifié par cssmaster (20 Oct 2011 - 23:44)

Salut,

Tu t'es trompé, c'est scroll pour faire ce que tu veux.

EDIT: tiens d'ailleurs j'avais un lien là-dessus: http://www.zonecss.fr/style_css/feuille_css_background_attachment.html
Modifié par jmlapam (20 Oct 2011 - 23:13)

Mais même avec scroll ça ne marche pas avec Firefox et IE.
Je vais bientôt plus avoir de cheveux à force !

Aie, tire pas trop sur tes cheveux.
tu pourrais donner plus de code stp?
Modifié par jmlapam (20 Oct 2011 - 22:54)

Salut,

Tâchons d'éclairer les choses une fois pour toutes.

Si tu veux que l'image d'arrière-plan reste au même endroit quand tu fais défiler ta page (un exemple ici, avec le bandeau bleu en haut à gauche), la valeur fixed de background-attachment est appropriée. Sinon, tu n'as rien à faire (scroll est la valeur par défaut de cette propriété).
Modifié par Victor BRITO (20 Oct 2011 - 22:55)

@victor exact


c'est dit dans le lien que je t"ai donné @cssmaster mais il faudrait plus de code pour savoir ce qui ne va pas.
Modifié par jmlapam (20 Oct 2011 - 22:56)

Voici mon code complet enfin ce que j'ai réalisé pour le moment.
Je précise que j'utilise Wordpress 3.0.1 sait-on jamais si ça a un lien. Je suis entrain de réaliser mon template personnalisé.

body {
	min-height: 1141px;
	background: url('images/background.jpg') scroll no-repeat;
	}
#page { 	margin-left: auto;
				margin-right: auto;
				width: 960px;
				
			}
hgroup {
	float: left;
	width: 235px;
	height: 33px;
	background:url('images/logo_titre.png') no-repeat top left;
}
hgroup span {
	display: none;
}
header {
	margin-top: 30px;
	position: relative;
}
#searchform {
	float: right;
}
header nav {
	clear: both;
	margin-left: 345px;
	width: 606px;
	height: 57px;
	background: url('images/menu_background.png') no-repeat;
	position: absolute;
	top: 59px;
	left: 12px;
	z-index: 2;
}
header nav ul {
	list-style-type: none;
	margin-left: 30px;
	line-height: 40px;
}
header nav ul li {
	position: relative;
	top: -17px;
	float: left;
	width: 130px;
	text-align: center;
}
header nav ul li a {
	font-family: Verdana, serif;
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
}
#main {
	position: relative;
}
#a_la_une {
	position: relative;
	top: 55px;
	left: 13px;
	z-index: 1;
	width: 950px;
	height: 380px;
	background: url('images/a_la_une.png') no-repeat;
}
.contact {
	width: 135px;
	height: 55px;
	position: relative;
	top: 46px;
	left: 13px;
	background: url('images/contact.png');
}
.contact li {
	list-style-type: none; 
	line-height: 55px;
	text-align: center;
}
.contact a {
	font-family: Verdana, serif;
	color: #ffffff;
	font-size: 18px;
	text-decoration: none;
}
.categorie_container {
	float: left;
	background: url('images/categorie_container.png');
	width: 302px;
	height: 311px;
}

Je viens de trouver le problème en lisant le code HTML généré par Wordpress.

Comme j'utilise le thème twenty eleven que je modifie "à ma sauce" j'ai vu qu'il affichait lui aussi un background sur body en fixed. J'ai donc supprimé ceci et depuis tout remarche à merveille.

Pour le min-height: 1141px; c'était simplement que je faisais des essais pour voir si ça avait une influence. Sinon, il sert à rien finalement.

cssmaster a écrit :
Comme j'utilise le thème twenty eleven que je modifie "à ma sauce" j'ai vu qu'il affichait lui aussi un background sur body en fixed.

Enseignement pour plus tard: toujours utiliser un outil d'inspection tel que Firebug ou Web Inspector pour vérifier quels styles s'appliquent à un élément donné.

cssmaster a écrit :


Pour le min-height: 1141px; c'était simplement que je faisais des essais pour voir si ça avait une influence. Sinon, il sert à rien finalement.

Ah ok d'accord, méfie-toi, IE n'aime pas trop min-height, sinon tant mieux que tu ais résolu ton problème en regardant le HTML.

Merci en tout cas pour votre aide.
Maintenant il est temps d'aller dormir pour moi.

jmlapam a écrit :
méfie-toi, IE n'aime pas trop min-height

Il n'y a qu'IE 6 (ainsi que les versions antérieures) qui ne l'aime pas.

exact, et il est vrai que c'est négligeable ici, au temps pour moi, m'enfin il est toujours là ce bougre d'IE6.
Modifié par jmlapam (21 Oct 2011 - 00:22)