Bannière en css

[Arès]

Je suis un gros débutant en CSS, mais d'habitude en bidouillant et en raisonnant par tâtonnement, j'avais l'habitude d'arriver à mes fins.

Pourtant aujourd'hui je n'arrive pas à faire un trucs "simple".

Le but:

Faire une bannière en haut d'un site.

Largeur: fluide 100%

Hauteur:200px;

Je voudrais quel commence à gauche par la répétition d'une image dans le sens des y sur toute la hauteur et quel poursuivre jusqu'au bout de la page avec une répétition selon x.

En gros ça :

|**|XXXXXXX|

avec les X extensible

J'ai penser à utiliser ça:

CSS
#header, #content {
 width: 100%;
 }

#header {
background: url(/img/header_x_1.png) repeat-x;
height: 200px;
 }

#header  .left{
	background: url(/img/header_y_1.png) repeat-y;
		float: left;

}

avec

header_x_1.png de taille 2x200.

header_y_1.png de taille 200x2.

malheureusement cela ne m'affiche que la header_x_1.png sur toute la largeur...

soit

|XXXXXXX|

Merci du coup de main.

[Dudu]

Salut

Normal, tu essaie de mettre plusieurs backgrounds sur un même élément (#header), ce qui n'est pas possible.

En fait c'est possible en CSS 3 de mettre des backgrounds multiples, mais pas de cette manière, et ce n'est reconnu actuellement que par Safari. Or une grande majorité de visiteurs n'utilisent pas Safari donc ce n'est pas une solution très "grand public" tant que CSS 3 n'est pas démocratisé.

Si ta bannière sert également de lien, typiquement un retour à la page d'accueil, tu peux envisager de mettre le deuxième background sur la balise <a>.

Comme ça:

<h1 id="header"><a href="/">Bla bla bla</a></h1>

et

#header {background: url(/img/header_x_1.png) repeat-x;
height: 200px;}

#header  a {display: block;
width: 100%;
background: url(/img/header_y_1.png) repeat-y;
 float: left;}

Je n'ai pas testé, mais ça devrait le faire

[Arès]

Merci;

En effet, ça marche, nickel.

Je vais aller continuer mon bidouillage de templete avec un poids en moins.