[RESOLU] CSS : #Header Background

[Stephane13]

Bonjour,

Je souhaite inclure une image de fond dans mon header de 980x75. Vu que tout se passe dans le header, j'ai pu voir qu'il n'y avait rien dans global.css au nom de #header donc j'ai fais ceci :

/* Header */
#header { 
   background-image:url(../img/Header-Motif.png);
   background-repeat:no-repeat;
   background-position:center;
}

Avec Firebug, je peux voir que le global.css à bien était pris en compte mais mon image de fond ne s'affiche pas, mon image est également bien dans le bon dossier. Où est le problème ?

Merci.

[crea34]

Bonjour, un petit lien serait utile à vous aider à résoudre éventuellement votre problème...

[Stephane13]

Je suis en Local donc je ne peux pas vous en donner un.

Autrement : je souhaite tout simplement ajouter une image en background est-ce que j'ai bien fait ?

[crea34]

essayez plus simplement

background: url('../img/Header-Motif.png') no-repeat top center; <= top center va renseigner à partir de où va se positionner votre image, left, right ou center (option), repeat -x ou -y va renseigner si votre image sera répétée horizontalement ou verticalement, no-repeat = comme son nom l'indique, si vous avez une grande image et que vous désirez qu'elle reste fixe au déplacement de la page vous pouvez ajouter fixed, avant url vous pouvez aussi définir une couleur de fond #couleur

[Stephane13]

Merci pour l'explication.

Je voulais surtout savoir si j'avais bien agi en fait au niveau de mon code. Il n'y a pas autre chose à modifier ailleurs pour que mon image apparaissent ?

[groover]

dans le global.css de ton template, tu mets ceci dans body

background:url(../img/tonimage.jpg); /* doit se trouver dand le dossier img du template */
   background-repeat: no-repeat; /* pas de répétition */
   background-position: center;/* centrage de l'image */
   background-attachment:fixed; /* fixe l'image pour éviter le scroll */

Bon code

Edit: Autant pour moi, je n'avais pas vu que c'était pour le header. j'ai donné l'info pour le background du site

[Stephane13]

Vous aurez peut être une idée de plus :

Cette fois-ci j'ai modifié directement le header.tpl :

Quand j'inspecte ma page avec Firebug, j'ai la ligne "Background image: url...." barré.

Qu'est-ce que cela signifie ?

[groover]

voilà ce que j'ai dans #header du global.css de mon template. Si ça peut t'aider

#header {
   float: left;
   width: 853px;
   background:white url(../img/ton_image.gif) no-repeat right center;
   text-align: right;
   padding-top:0.5em;

Bon code

[crea34]

je ne comprends plus ce que tu veux faire, mettre une image en background ou en header ???au départ tu parles du header et ensuite tu ne veux que mettre une image en background et là tu reviens avec un code pour le header...

pour une image en background de header :

#header {

background :url de ton image;
}

avec les positions, centrage et marges qui vont bien...

[Stephane13]

Je veux mettre une image en background mais dans le header.

Le code de Groover fonctionne. Je vais voir pourquoi ça ne marchait pas avec le mien. Merci beaucoup.

[crea34]

pourquoi modifier le header.tpl ? avec juste l'adresse de ton image dans le global.css ça le fait...

[Stephane13]

Le header c'était pour shunter au cas où. Mais j'ai laissé tombé.


Alors là, il faut qu'on m'explique :

J'ai pris le code de Groover qui fonctionne :

 float: left;
   width: 853px;
   background:white url(../img/ton_image.gif) no-repeat right center;
   text-align: right;
   padding-top:0.5em;

Je désire le modifier pour épuré les choses qui ne me servent pas. Le code qui suit fonctionne mais je possède un petit espace blanc entre le haut de la page et mon background du header.

 float: left;
   background:white url(../img/ton_image.gif) no-repeat right center;

Pour résoudre cet espace j'ajoute donc : "top"

 float: left;
   background:white url(../img/ton_image.gif) no-repeat right center [b]top[/b];

Et là : PROBLEME : mon image ne s'affiche plus. A noter que si j'enlève float: left également mon image ne s'affiche pas.

Pourquoi =( ?

[groover]

enlève le padding-top

[crea34]

top entre balises b ne doit pas être reconnu par le css , mettre :

background:white url(../img/ton_image.gif) no-repeat top right ;

ou top center, tu ne peux pas mettre top right et center en même temps, il faut choisir

[Stephane13]

Le "top" est une erreur de ma part sur le forum, je voulais le mettre en gras mais en moe "code" evidemment ce n'est pas transcrit.

En effet, center et top en même temps pas possible.

Merci beaucoup à vous ça fonctionne même si je ne comprend pas pourquoi : background-image ne veut pas marcher.