Multiples background images

Voir le sujet précédent Voir le sujet suivant Aller en bas

Multiples background images

Icône par defaut le Mar 8 Mai 2012 - 10:05
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
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 .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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