Discussion :

[guillaume7684]

Bonsoir,

Je suis débutant en css et il y aune chose que je n'arrive pas à faire sur mon site: http://www.sygma-nails.com

En image de fond, il y a un fond noir.

Avec Firebug, je vois dans "div.wrapper":

Code :

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

1
2
3
4
5
.wrapper {
background:black none repeat scroll 0 0;
min-height:100%;
text-align:left;
}

Si on supprime la ligne background, apparait une image rose dégradé noir.

Mon problème est que cette image rose ne reste que sur le haut du site, alors que j'aimerais qu'elle remplisse le fond complet.

Si je n'ai pas été assez clair, n'hésitez pas à me poser des questions.

Merci pour votre aide.

[12monkeys]

Bonsoir

Ton image d'en tête rose est déclaré dans le body et s'appelle bkg_body2.gif.

Agrandi cette image en hauteur d'au moins 1000 ou 1500 pixels et dans la partie ajoutée mets y la couleur noir...

Puis tu supprimes la ligne ci dessus : le background dans le wrapper.

Cela me semble la solution la plus simple...

[guillaume7684]

Je ne pourrais essayer que demain d'agrandir l'image, car je n'ai pas de logiciel retouche photo a la maison.

Par contre existe-t-il une solution qui permet d'entrer 2 codes couleurs et de dire de faire un dégradé de haut en bas.
Je crois deja avoir vu ça quelque part !!!

Merci.

[guillaume7684]

J'ai trouvé ça sur le net:

Une image 1 px en dégradé sur une bonne hauteur puis quand même préservé une couleur de fond de la même couleur que le bas de ton dégradé au cas ou certains visiteurs auraient des réso d'écran immense (du moins supérieure à la hauteur de ton image de fond.

A cela j'ajouterai que pour donner le même effet que sur le site exemple, il serait bon de "fixer" le fond, ainsi quelque soit la hauteur de ta page tu aura toujours le même dégradé.
Procéde ainsi dans ton CSS :

background: #couleur-de-fond url(background-de-1-px.jpg) repeat-x fixed top left;

Quelqu'un pourrait-il me dire exactement en quoi ca consiste?

[12monkeys]

La répétition de l'image c'est ce qui se fait déjà dans ton code : l'image rose as une largeur de 1 pixel, elle est donc répétée vers la droite avec le code suivant :

Code :

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

background: transparent url(../images/bkg_body2.gif) repeat-x;

Le fait de fixer l'image consiste à ce que l'image ne bouge pas lorsque on scroll vers le bas. Encore une fois dans ton cas, l'image rose disparait quand on descend dans la page (sous réserve que le contenu soit plus long que la hauteur de l'écran), si on la fixe, elle suivra le scroll : on continuera à la voir même en étant tout en bas de la page...

Le fait de fixer l'image d'arrière plan ne me semble pas une bonne idée, elle devrait rester sous le header... La répétition ne peut pas être utilisée non plus : si tu as un dégradé du rose vers le noir sur 200 pixels et que tu indiques également la répétition verticale, alors tous les 200 pixels tu verra réapparaitre le rose...

Et pour séparer la partie rose et le reste en noir il faudrait revoir ta structure pour séparer ces deux zones... Donc je pense que ma première solution reste la meilleure...