Une frise avec 1 seule image qui se répete

Résolu
fanette26 -  
 fanette26 -
Bonjour,

Je fais du html et j'aurai aimé savoir comment faire une frise dans la largeur avec une seule photo, un gif animé. C'est à dire faire répéter une même image de façon à obtenir une bande de cette image dans la largeur et situé en haut de ma page html.
Je ne sais pas si ma question est clair mais je vous remercie par avance pour votre aide.

2 réponses

JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228
 
Salut ...

Répéter une image, c'est faisable avec du CSS !!

background-image:url('image.png');  
background-repeat:repeat-x; /*pour répéter horizontalement */  
background-repeat:repeat-x; /*pour répéter verticalement */


Mettez en résolu quand c'est résolu -.- ...
0
fanette26
 
Sur ma feuille de style ça donne :

background-image: <img src="../images/chevalanime.gif">;
background-repeat:repeat-x;
Mais ça ne fonctionne pas. J'ai fais une erreur?
Sachant que j'ai déjà un fond d'écran sur mon CSS mais je voudrais que la frise soit juste sur la partie supérieure de la page.
0
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228
 
non non, ça <img src="../images/chevalanime.gif">, c'est du html, il faut que tu utilise celui que j'ai poster, or du CSS ...
background-image:url('../images/chevalanime.gif');

ça depend de ton code html(de la structure de tes pages), si par exemple tu as une balise div dont l'id est header, et qui represente la partie superieur de ta page ...
alors dans le CSS, tu fait ...

#header {   
background-image:url('../images/chevalanime.gif');   
background-repeat:repeat-x;    
}

Mettez en résolu quand c'est résolu -.- ...
0
fanette26
 
a ok! Par contre sur ma page html, pour représenter ma partie supérieur j'ai mis :
<div class="header">
Mais il manque quelque chose non ? (Je sais je suis une cata en html... lol )
0
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228
 
alors au lieux du diese # tu mets un point !!!

.header {    
background-image:url('../images/chevalanime.gif');    
background-repeat:repeat-x;     
}


Sinon, tu ajoute a la balise un id, et tu l'utilise, tout simplement ...
<div class="header" id="blabla">

#blabla{   
background-image:url('../images/chevalanime.gif');   
background-repeat:repeat-x;    
}
0
fanette26
 
Ça marche !! : )
Merci pour tes conseils, ils m'ont été très utiles !
0