Une frise avec 1 seule image qui se répete [Résolu/Fermé]

Signaler
-
 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

Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
225
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 -.- ...
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.
Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
225
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 -.- ...
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 )
Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
225
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;    
}
Ça marche !! : )
Merci pour tes conseils, ils m'ont été très utiles !