Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 8 Mai 2012 - 10:05
coucou ,

voir le rendu pour mieux comprendre l'apparence donnée hinhin :

http://milouze.1fr1.net/h53-multiple_background_images

Le code HTML:

Code:

<div class="conteneur">
<p>Votre texte</p>               
</div>


Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


Code:
/*La position, dimension et apparence  du bloc */
.conteneur
{
width: 500px; /*la largeur du bloc*/
height: 200px;/*La hauteur du bloc*/
border: 1px solid #20aec8;/*L'épaisseur et la couleur de la bordure*/
background: /*Les 4 images avec leurs positionnements*/
url(lien de l image en haut et à gauche) no-repeat left top,
url(lien de l image en haut et à droite) no-repeat right top,
url(lien de l'image en bas et à gauche) no-repeat left bottom,
url(lien de l'image en bas et à droite) no-repeat right bottom;

}
/*La position et l'apparence du texte */
.conteneur p
{
color:#20aec8;
text-align:center;
padding-top:30px;
}

Compréhension sur le positionnement des images:
on défini url de l'image puis son positionnement hinhin .

Code:

L'attribut "no-repeat" permettra de ne pas afficher les images en répétition.

L'image sera positionnée en haut et à gauche:
url(lien de l image en haut et à gauche ) no-repeat left top,

L'image sera positionnée en haut et à droite:
url(lien de l image en haut et à droite) no-repeat right top,

L'image sera positionnée en bas et à gauche:
url(lien de l'image en bas et à gauche) no-repeat left bottom,

L'image sera positionnée en bas et à droite
url(lien de l'image en bas et à droite) no-repeat right bottom;



Voilà c'est tout pour le moment clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

  
  • © PunBB | Signaler un abus