Discussion :

[JefReb]

Bonjour,
Je vais essayer de respecter les codes du forum.
Je dois suivre (bénévole) une charte graphique pour la création d'une page d'un Club.
Cette charte comprend une image-photo fixe en fond d'écran et le contenu de la page doit glisser sur ce fond d'écran et passer en dessous du bandeau fixe aussi en haut de page.

J'arrive à mettre l'image fixe en fond lorsque j'utilise un nombre de pixel à gauche.
Lorsque j'utilise le % à gauche, le résultat est complètement différent.

Mais je souhaiterais que la page soit centrée dans la fenêtre.
Or, avec le

Code :

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

background-attachement:fixed;

le

Code :

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

background-position

se réfère apparemment toujours à la fenêtre et non au conteneur.
J'ai testé le

Code :

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

background-position: inherit

mais je n'y arrive pas.
Inherit permettant de prendre les position du conteneur. mais ça ne marche pas.
Quelqu'un aurait-il une explication et des exemples pour l'utiliser?

Je joins une maquette très épurée avec le minimum pour comprendre.
En fait simplement y-a-t-il un moyen de fixé une image en position fixed à l'intérieure d'un conteneur qui serait en

Code :

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

margin:0 auto;

et tout en gardant à l'intérieur un conteneur non fixe.
hum est-ce clair? la maquette y répondra bien mieux.

Y-a-t-il une solution? si quelqu'un a le courage de se pencher sur ce problème, car je n'ai rien trouvé sur les forum français et anglais.
Merci d'avance pour l'aide ou une explication apportée
Cordialement
Jef

[Aleadia]

Bonjour,

Pour centrer un élément de type block (comme <div> ou <p>), il faut déterminer sa largeur et mettre une marge automatique. C'est la largeur spécifiée qui est centrée dans la page.

Ainsi dans votre exemple, le code CSS pour centrer la page serait :

Code :

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

1
2
3
4
5
body {
	width : 769px;
	margin : auto;
	background : url(fond.jpg) 50% 160px no-repeat fixed;
}

769px est la taille de votre image de fond. Je l'ai fixée à la moitié de la page et à 160px (la taille de l'image du bandeau) du haut.


Le code CSS complet :

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
27
28
body {
	width : 769px;
	margin : auto;
	background : url(fond.jpg) 50% 160px no-repeat fixed;
}
 
h1 {
	text-align : center;
}
 
#bandeau {
	height : 300px;
	width : 769px;
	overflow : hidden; /* Pour cacher le petit bout de bandeau qui dépasse */
	position : fixed; /* Le bandeau reste toujours à la même place, même quand la page descent */
	z-index : 1; /* L'index par défaut est 0. En l’augmentant, on indique que l'élément doit se placer au-dessus des autres. */
	background : url(fond.jpg) 50% 160px no-repeat fixed; /* On remet le même pour éviter d'avoir un fond transparent sous le titre */
}
 
#contenu {
	width : 600px;
	height : 1000px;
	position : absolute;
	margin : 72px;
	margin-top : 300px;
	padding : 10px;
	border : 3px solid #963;
}

Dans le code HTML, je n'ai changé que la balise contenant l'image :

Code html :

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

1
2
3
4
5
6
<div id="bandeau">
	<div id="hautdepage">
		<img src="bandeau.jpg" />
		<h1>Ici est le titre</h1>
	</div>
</div><!-- Fin de bandeau -->

En effet, vous utilisiez une <div> uniquement pour contenir l'image du bandeau, sans aucun texte par-dessus. Dans un tel cas, il est bien plus simple de mettre l'image directement dans une balise <img />. Après, tout dépend de ce que vous vouliez faire dans la véritable version du site.

J'espère que mes explications sont assez claires, n'hésitez pas à demander des précisions.

[JefReb]

Merci Aleadia,
Je vais me remettre dans le code après vos explications et je donnerai le résultat.

[JefReb]

Aleadia, merci et effectivement cela fonctionne et je savais comment centrer un <div> avec un margin:0 auto; mais pourtant, je souhaiterais utiliser une <div> et non body pour positionner l'image de fond.
Pourquoi? tout simplement, parce que l'image de fond doit pouvoir être changer en fonction de la page. Ainsi en utilisant php, il est très facile de prendre un id="fond1" ou id="fond2". Ce qui n'est pas possible si on met l'image fixe de fond à body.

J'ai essayé de le faire avec votre code, mais seule l'image du bandeau est visible et le contenu qui défile. L'image de fond est invisible ou du moins tant que l'on ne lui donne pas une hauteur fixe et non auto, mais même dans ce cas l'effet n'est pas le même escompté.
ainsi, votre code CSS en mettant un id à la place de body:

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
#fond {
	width : 769px;
	margin : 0 auto;
	background : url(fond.jpg) 50% 160px no-repeat fixed; }
 
h1 { text-align : center; }
 
#bandeau {
	height : 300px;
	width : 769px;
	overflow : hidden; 
	position : fixed;
	z-index : 1; 
	background : url(fond.jpg) 50% 160px no-repeat fixed; }
 
#contenu {
	width : 600px;
	height : 1000px;
	position : absolute;
	margin : 72px;
	margin-top : 300px;
	padding : 10px;
	border : 3px solid #963; }

et le code html:

Code html :

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

1
2
3
4
5
6
7
8
<div id="fond">
<div id="bandeau">
	<div id="hautdepage">
		<img src="bandeau.jpg" />
		<h1>Ici est le titre</h1>
	</div>
</div><!-- Fin de bandeau -->
</div><!-- Fin de fond -->

De plus, je souhaiterai comprendre les 50%. Dans tout ce que j'ai pu lire, le background-position concerne left top right ou bottom. Dans votre code css si je comprends bien cela veut dire background-position-left:50%; et background-position-top:160px;
Donc pourquoi positionner à gauche à 50% avec un margin:auto à body?
Merci encore pour votre aide

[Aleadia]

Je passe rapidement pour vous prévenir que je me replongerai plus en avant dans votre code demain, pour l'instant je dois privilégier mes propres projets.

En ce qui concerne la position du background, j'avais commencé avec ceci :

Code :

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

background : url(fond.jpg) no-repeat fixed bottom;

L'image était bien centrée, mais le rendu était moins joli puisque l'on ne voyait pas le haut de l'image. J'ai donc tenté plusieurs choses, étonnée que remplacer "bottom" par "top" ne fonctionne pas.

Je pense (mais n'affirme rien) que "50%" permet de fixer le milieu de l'image à 50% de la page. Je ne saurais dire pourquoi, mais j'essaierai tout de même de trouver une véritable explication. (oui, j’apprends un peu en même temps que j'explique ! )

[JefReb]

J'ai refait le site en utilisant votre méthode. J'ai juste ajouter une bande en haut à l'image de fond pour réserver une place au bandeau.
Moi aussi j'apprends constamment.
L'histoire du 50% est troublant, car j'en étais aussi arrivé à la même conclusion. Il semblerait que cela centre le milieu de l'image.
Je n'ai trouvé nulle part sur internet cette explication. Est-ce left:50% ou right:50%.
En tout cas, le résultat est assez étrange, car si on redimensionne la fenêtre on voit clairement que l'image bouge par rapport au bandeau qui lui est bien fixe.
Pour l'instant je n'ai pas trouvé une meilleure solution que la vôtre.
Merci encore

[Aleadia]

Ouf, voilà qui me rassure !

Par contre, un petit doute me vient, j'ai peut-être mal compris à propos du fond qui doit changer : je pensais qu'il s'agissait d'une autre image se plaçant derrière le reste, occupant les marges vides sur les côtés. Mais en voyant la 2ème version du site, j'ai plutôt l'impression que c'est l'image fond.jpg elle-même qui change selon les pages. Est-ce le cas ?

EDIT : Oui, c'est bien ce que vous aviez dit, je m'en rend compte en relisant votre message. Je ne sais pas pourquoi j'ai compris autre chose.
Du coup, il suffirait de renseigner l'image du body dans le HTML. Ce n'est pas très académique, mais cela devrait bien fonctionner.

[JefReb]

Oui j'ai plusieurs images de fond (fond0.jpg, fond1.jpg etc.) et de même pour le bandeau.
Comme ce club m'a demandé si cela était possible, j'ai tout de suite fait la maquette dans ce sens, et il est très facile avec php dans choisir une image.

par contre votre phrase m'intrigue:

Du coup, il suffirait de renseigner l'image du body dans le HTML

Je ne comprends pas trop. Aujourd'hui sur vos conseils, la background-image est dans body.
Qu'entendez-vous par

dans le html

?

[Aleadia]

Eh bien, votre souci est maintenant de changer l'image de fond selon les pages, n'est-ce pas ?

Pour cela, une méthode toute simple serait de mettre directement dans la feuille HTML :

Code html :

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

1
2
3
<style type="text/css">
        body    { background : url(images/nfond0.jpg) 50% 0px no-repeat fixed; }
</style>

Mais maintenant que je regarde votre code dans le détail, tout m'a l'air de très bien fonctionner avec le système des id. Du coup, je ne vois pas ce qui vous embête...

[JefReb]

Oui c'est vrai que le problème ne saute pas aux yeux et qu'il n'est pas trop important. C'est juste que j'aimerais comprendre.
Si l'on prend mon dernier exemple "etudefond2", je fais exactement ce que vous dites. J'ai plusieurs id qui définissent le fond:

Code :

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

1
2
3
4
5
#fond		{ position:relative; }
.fond1      { background : url(images/nfond1.jpg) 50% 0px no-repeat fixed; } 
.fond2      { background : url(images/nfond2.jpg) 50% 0px no-repeat fixed; } 
.fond3      { background : url(images/nfond3.jpg) 50% 0px no-repeat fixed; } 
.fond4      { background : url(images/nfond4.jpg) 50% 0px no-repeat fixed; }

Et dans mon code html je l'utilise 2 fois:

Code html :

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

1
2
3
4
<body class="fond4">
<div id="fond">
<div id="bandeau" class="fond4">
etc.

Si bien qu'il est très facile de changer en php avec:

Code php :

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

1
2
3
<?php echo '<body class="fond'.$imagefond.'">';?>
<div id="fond">
<?php {echo '<div id="bandeau" class="fond'.$imagefond.'">';} ?>

Jusque là aucun problème.
MAIS maintenant si on fait varier la largeur de la fenêtre du navigateur, tout est parfait tant que l'image de fond est entièrement dans la fenêtre.
Regarder le haut de la bouteille de champagne elle reste bien fixe en dessous du menu "photo".
MAIS dès que le fond touche la gauche de la fenêtre, la bouteille reste bien au milieu de la fenêtre, mais elle se déplace progressivement vers la gauche alors que le bandeau lui ne bouge pas d'un poil.
Bon il faut être vicieux pour bouger comme cela la largeur de la fenêtre, mais cela ne fait pas propre pour un programmeur et surtout j'aimerai comprendre et trouver une solution si il y en a.
Sinon, ça restera comme ça.

[NoSmoking]

Bonjour,
pourquoi ne pas essayer la solution proposée sur Conteneur avec parent en position fixed