Background-position et attachement fixed

Version imprimable

23/01/2013, 18h59
JefReb

1 pièce(s) jointe(s)

Background-position et attachement fixed

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:

background-attachement:fixed;

le

Code:

background-position

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

Code:

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:

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

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:

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:

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:

1 2 3 4 5 6 <div id="bandeau"> <div id="hautdepage"> <img src="bandeau.jpg" /> <h1>Ici est le titre</h1> </div> </div>
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. :)

27/01/2013, 08h13
JefReb

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

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:

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:

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> </div>
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

29/01/2013, 13h05
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:

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 ! :roll:)
30/01/2013, 08h15
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
30/01/2013, 18h44
Aleadia

Idem pour le 50%, j'ai rien trouvé de bien concluant.
Par contre, il est tout à fait normal que la position de l'image s'adapte à la taille du navigateur, le pourcentage est fait pour cela.
En lisant votre texte, j'ai l'impression que le bandeau reste à sa place originelle tandis que l'image de fond glisse selon la taille du navigateur, est-ce le cas ? Chez moi, toute la page s'adapte bien...

Sinon, j'avais pensé à utiliser la balise html pour l'image qui change, ce qui aurait permis de garder <body> pour l'image du milieu. Mais cela ne fonctionne pas du tout, pour une raison qui m'échappe. Peut-être aurez-vous plus de chance que moi de ce côté-là ?

J'ai essayé déplacer le CSS du <body> sur la balise <div> qui englobe tout le code, mais le bas de l'image remonte au fur et à mesure que l'on descend la page. C'est très étrange... Il doit y avoir une erreur de logique quelque part, mais je ne vois pas où. :?
31/01/2013, 10h40
JefReb

1 pièce(s) jointe(s)

Merci de passer du temps. Il est vrai que j'aime bien comprendre totalement et que je continue à tourner en rond. Le résultat n'est pas parfait mais c'est déjà bien mieux grave à vous. Si vous avez le courage j'ai attaché un fichier zip avec le minimum pour voir la maquette. Encore merci
31/01/2013, 11h15
Aleadia

De rien, ça me fait plaisir de pouvoir aider.

Joli site sinon, j'aime bien la petite bête qui se déplace. :D Le menu est bien fait aussi.

Par contre, je me demandais, à propos du CSS, est-il mis ainsi dans toutes vos pages ? Ou bien dans une feuille de style à part ?
Avec un code aussi lourd et autant de pages, il serait bien plus simple de tout regrouper dans une unique feuille de style.

Ha oui oui, c'est évident. Je travaille en html, pour mettre au point, c'est plus rapide. Mais ensuite je bascule tout le css dans un fichier à part.
Travailler dès le départ avec un fichier à part est très contraignant et il faut souvent vider le cache pour prendre en considération les dernières modifications.
Une fois au point, je bascule en PHP, pour automatiser le bandeau, le pied de page et passer les titres ou les changements de fond de page.
en général en début de chaque page je mets par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php $imagebandeau = 0; $imagefond = 4; $titrepage = "Accueil"; $titre1 = ""; $titre2 = ""; $maj = TRUE; $majdate = '30 Janvier 2013'; $bandeau =$_SERVER["DOCUMENT_ROOT"]."/ssi/bandeau.inc.php"; $pied = $_SERVER["DOCUMENT_ROOT"]."/ssi/pied.inc.php"; ?>
Et dans la page:
Code:

1 2 3 4 <?php if(file_exists($bandeau)){include ($bandeau);}else{echo "ERREUR 1";} ?> ... ... <?php if(file_exists($pied)){include ($pied);}else{echo "ERREUR 1";} ?>
Je mets tout ça pour donner des idées à certains débutants.
Si une idée vous vient ... je suis preneur.

31/01/2013, 14h21
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. :aie:
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.
31/01/2013, 18h30
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:

Citation:

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

Citation:

dans le html

?
31/01/2013, 20h00
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:

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...

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:

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:

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:

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.

02/02/2013, 19h32
NoSmoking

Bonjour,
pourquoi ne pas essayer la solution proposée sur Conteneur avec parent en position fixed
04/02/2013, 15h10
JefReb

1 pièce(s) jointe(s)

Tout à fait vrai et les 2 méthodes arrivent au même résultat.
Pourtant dans les 2 cas, lorsque l'on diminue vers la gauche la fenêtre, l'image de fond fixe se déplace par rapport à l'image fixe du bandeau.
Dans le zip attaché, j'ai fait 3 petits exemples très simplifiés avec le minimum de code.
1) fond-nosmocking.html (methode de NoSmocking)
2) fond-aleadia.html (méthode de aleadia )
3) fond-leftfixe.html (dans cette exemple je ne centre pas la page dans la fenêtre, mais je place les images fixes arbitrairement à 140px sur la gauche.

Avec l'exemple 3, l'image de fond et le bandeau sont fixes et solidaires.
Mais la page n'est pas du tout centrée dans la largeur de la fenêtre.

Je cherche donc toujours à obtenir la même chose que les méthodes 1 et 2, mais je cherche à rendre des 2 images solidaires comme la méthode 3

Citation:

1) fond-nosmocking.html (methode de NoSmocking)

non elle reste incompléte, tu n'as pas été au bout de l'idée avec le rajout d'un bandeau ;)

le html devient

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- AJOUT d'un BANDEAU -->
<div id="bandeau" class="imagebandeau">
  <div class="largeur">
    <h1>Bandeau</h1>
  </div>
</div>
<!-- MODIFICATION de l'ENTETE -->
<div id="entete" class="imagefond">
  <div class="largeur">
    <div id="navigate">
      La place du Menu...
    </div>
    <h1>L'entête</h1>
  </div>
</div>
<!-- OUT --
<div id="entete" class="imagefond">
  <div id="fondbandeau" class="largeur imagebandeau">
    <h1>L'entête</h1>
  </div>
</div>
-->

il faut bien sûr adapter le CSS comme suit

Code:

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
29
30
31
/* MODIF */
.imagebandeau {
/*  background:url(bandeau.jpg) 0px 0px no-repeat; /* OUT */
  background:url(bandeau.jpg) top center fixed no-repeat;
}
/* AJOUT */
#bandeau{
  position:fixed;
  height:139px;
  left:0;
  top:0;
  right:0;
}
/* MODIF */
#entete {
  position:fixed;
  height:171px;           /* 300 MOINS HAUTEUR BANDEAU */
  left:0;
  top:0;
  top:139px;              /* HAUTEUR DU BANDEAU */
  right:0;
  color:#FFF;
}
/* MODIF */
#page {
  height:auto;
/*  padding-top:300px;    /* REMPLACE */
  padding-top:310px;      /* HAUTEUR de L'ENTETE + BANDEAU */
  padding-bottom:50px;
  color:#000;
}

peut être de petits aménagements à faire.

05/02/2013, 08h45
JefReb

Merci NoSmocking, effectivement je n'avais pas fait le raisonnement complet.
Merci de t'être penché sur mon code (et aussi aleadia). j'ai maintenant toutes les billes et je peux clore ce topic.
Encore merci