[css][help] répéter une image
jolfl
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerai savoir comment faire pour pouvoir répéter une image et non un arrière plan.
J'ai eu beau essayer les background repeat x etc... je ne trouve pas ma solution sur les nombreux forumes visité.
Voilà je vous montre de base ce que j'ai :
https://imageshack.com/
et ce que j'aimerai obtenir :
https://imageshack.com/
et sans modifié mon background actuel
Merci de vos réponse :)
J'aimerai savoir comment faire pour pouvoir répéter une image et non un arrière plan.
J'ai eu beau essayer les background repeat x etc... je ne trouve pas ma solution sur les nombreux forumes visité.
Voilà je vous montre de base ce que j'ai :
https://imageshack.com/
et ce que j'aimerai obtenir :
https://imageshack.com/
et sans modifié mon background actuel
Merci de vos réponse :)
A voir également:
- [css][help] répéter une image
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Rechercher une image - Guide
5 réponses
Tu peux mettre un div devant ton background et mettre ta seconde image en fond de celui-ci. Le tout en CSS.
Je suis de l'avis d'Arthezius
<div style="width:800px;height: 162px;background:url('url de l'image') repeat-x"></div>
Merci de vôtre aide mais ça ne s'affiche toujours pas , est ce que j'ai fait des erreur ?
HTML :
<div class="text2"><div style="width="200" height="560";background:url('images/text2.jpg') repeat-x"/ ></div> </div>
CSS :
.text2
{
position:absolute;
z-index:17;
left:1500px;
top: 480px;
margin-left:-320px;
margin-top:-50px;
}
HTML :
<div class="text2"><div style="width="200" height="560";background:url('images/text2.jpg') repeat-x"/ ></div> </div>
CSS :
.text2
{
position:absolute;
z-index:17;
left:1500px;
top: 480px;
margin-left:-320px;
margin-top:-50px;
}
J'ai résolue mon erreur ,mais toujours aucun repeat, je met mon humble
css :
{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scroll
}
.text2
{
position:absolute;
z-index:17;
left:1500px;
top: 480px;
margin-left:-320px;
margin-top:-50px;
}
html :
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-x"></div></div>
Une petite aide ?
css :
{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scroll
}
.text2
{
position:absolute;
z-index:17;
left:1500px;
top: 480px;
margin-left:-320px;
margin-top:-50px;
}
html :
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-x"></div></div>
Une petite aide ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
verifie bien ton css,
avec les valeur negative tu risque de mettre ta div en dehors de l'écran .
Pourquoi left et margin left?
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
left:1500px; top: 480px; margin-left:-320px; margin-top:-50px;
avec les valeur negative tu risque de mettre ta div en dehors de l'écran .
Pourquoi left et margin left?
Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.
Remplace simplement:
par:
Et côté CSS:
Si tu mets left:1500px;, ton bloc est à 1500px vers la droite. Autrement dit, il est hors écran dans mon cas (mon écran étant à 1440px et donc chez la majorité des gens).
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-x"></div></div>
par:
<div class="text2"> </div>
Et côté CSS:
.text2
{
position:absolute;
z-index:17;
width:800px;
height:560px;
margin:0px auto;
background:url('images/text2.jpg') repeat-x;
}
Si tu mets left:1500px;, ton bloc est à 1500px vers la droite. Autrement dit, il est hors écran dans mon cas (mon écran étant à 1440px et donc chez la majorité des gens).
Autre erreur: vous êtes fâché avec les points virgules hors un ";" doit terminer toute propriétés CSS, c'est pas pour faire beau c'est pour lui indiquer la fin de la ligne sinon il buggues.
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-xICI"></div></div>
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-x;"></div></div>
et
{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scrollICI
}
Pas de nom de classe devant est ce une erreur de copié collé?
.machin{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scroll;
}
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-xICI"></div></div>
<div class="text2"><div style="width:200px; height:560px;background:url('images/text2.jpg') repeat-x;"></div></div>
et
{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scrollICI
}
Pas de nom de classe devant est ce une erreur de copié collé?
.machin{
background-color:#fffff;
background-image:url('images/background.png');
background-repeat:repeat-x;
background-attachment:scroll;
}