Discussion :

[cyberpat]

Bonjour à tous,

Je bidouille plus ou moins en css, mais beaucoup plus en garphisme.
Je m'occupe du design du site de ma femme. www.bambinovpc.com

Actuellement je met en place le design en fond du site disant que les frais de port son offert au delas de xx€.
J'ai compris que lorsque la page d'accueil se charge elle appel des page css d'ont une oui il y a plusieurs balise body

Pour le fond du site:

Code :

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

1
2
3
4
5
body {
  font: normal 62.5% 'Roboto', Geneva, Helvetica, Arial, Trebuchet MS, Bitstream Charter, FreeSans, sans-serif;
  background: #e6f2fa url(../../images/kids/body-bg.png) repeat center top;
  color: #212121;
}

Pour le bandeau bleu en haut:

Code :

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

1
2
3
#body {
  background: url(../../images/kids/h-rep.png) repeat-x center top;
}

et pour le design du header:

Code :

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

1
2
3
#c1-body {
  background: url(../../images/kids/h-bg.png) no-repeat center 12px;
}

Actuellement, j'ai modifier l'image de cette dernière balise (body-bg.png) pour quelle affiche en plus mon design pour les frais de port offert.
Mon probleme est que la balise du header (#c1-body) n'est pas figé, elle bouge avec la navigation de la souris et c'est très bien.
Mais pour le design des frais de port, je voudrais qu'il reste figer a une certaine hauteur, pour qu'il soit visible à n'importe quel moment sur mon site.
J'ai compris qu'il faut créer une nouvelle balise body, mais après plusieurs essais, je donne ma langue au chat.

Voila, j’espère mettre bien expliqué. j'ai tout les fichier à disposition, pour qui veux m'aider.

[black-hawk-down]

Salut,

Pour fixer un élément il faut utiliser la propriété CSS position avec la valeur "fixed".

Après tu peux regarder du côté de background-attachment si c'est plus ce que tu recherches.

[cyberpat]

Merci, mais ça je l'ai compris, mais se que je ne comprend pas c'est comment faire une autre balise bady en plus de c1.
Je ne sais pas si il faut faire exemple :

Code :

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

1
2
3
#c2-body {
background: url(../../images/kids/le nom de ma nouvelle image.png) no-repeat center fixed 340px;
}

car ça, j'ai essayé et ça ne marche pas.

[s0h3ck]

@cyberpat,

Si vous pouvez « couper » votre fond d'écran en deux, soit les fils et le prix avec les boites, voici une alternative en faisant du pouce sur l'idée de background-attachment :

Code :

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

1
2
3
4
5
#c1-body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

Pour plus d'informations, visitez cette page.

[cyberpat]

Merci pour le conseil, mais ca ne marche pas.
Avec cette méthode, seulement la première image s'affiche et l'attachement ne marche pas elle est répétée à l'infini meme en mettant un no-repeat.

j'ai mis ça et ça n'a pas marché:

Code :

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

1
2
3
4
#c1-body {
  background: url("../../images/kids/h-bg.png"),  url("../../images/kids/h-bg.png");
  background-attachment: no-repeat center 12px, no-repeat center fixed 340px;
}

mais j'ai du surement me tromper

[cyberpat]

Entre temps, j'ai revu ma copie et ça marche nickel.
Merci à vous

Code :

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

1
2
3
4
5
6
#c1-body {
  background: url("../../images/kids/h-bg.png"), url("../../images/kids/h-fdp.png");
  	background-position: center 12px, center 340px;
	background-attachment: scroll, fixed;
	background-repeat: no-repeat, no-repeat;
}

[s0h3ck]

Attention là!

Code css :

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

1
2
3
4
5
background-image: /* ... */
background-position: /* ... */
background-attachment: /* ... */
background-repeat: /* ... */
/* ... */

ou bien

Code css :

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

background: [color][url][repeat][position][attachment]