Un cadre redimensionnable en css

Nous allons ici vous expliquer comment créer un cadre redimensionnable à l'infini grâce au css, nous ne parlons pas ici de la propriété css border mais bel et bien d'un cadre que vous aurez au préalable préparer image par image.

Nous allons tout dabord choisir notre image à encadrer et le cadre.

Notre image

Notre cadre (cette image est volontairement réduite pour plus de lisibilité)

Il faut maintenant créer chaque coté et chaque coin du cadre. Je vous conseil de n'utiliser qu'un seul coin du cadre et de créer les autres coins à partir de celui-ci (à l'aide des symétries verticales et horizontales de photoshop par exemple), ceci afin d'éviter d'avoir trop de différence de couleur entre les coins et les cotés adjacents. Pour créer vos cotés sélectionnez une partie très fine (proche du coin) dans le sens vertical et une autre dans le sens horizontal. Pour créer les deux cotés qu'il va vous manquer utiliser à nouveau les symétries.

Nous obtenons donc les fichiers images suivants:

	Haut gauche
	Haut droite
	Bas gauche
	Bas droite
	Horizontal bas
	Horizontal haut
	Vertical droite
	Vertical Gauche

.imgGauche {
background:url('vg.jpg') repeat-y; /* on applique le background et on le repete verticalement*/
display:table; /*permet de réduire la taille du div au minimum*/
}
.imgDroite {
background:url('vd.jpg') repeat-y right;  /* on applique le background et on le repete verticalement en le placant à droite*/
}
.imgHaut {
background:url('hh.jpg') repeat-x; /* on applique le background et on le repete horizontalement*/
}
.imgBas {
background:url('hb.jpg') repeat-x bottom; /* on applique le background et on le repete horizontalement en le placant en bas.*/
overflow:auto; /*permet de prendre en compte la hauteur des élément floatant.
}

<div class="imgGauche">
	<div class="imgDroite">
		<div class="imgHaut">
			<div class="imgBas">
				<img src="hg.jpg" alt="" style="float:left;"><!-- on place le coin haut gauche -->
				<img src="hd.jpg" alt="" style="float:right;"><!-- on place le coin haut droit -->
				<img src="Joconde.jpg" alt="encadrer une image" style="margin:0 0 0 178px;"><!-- ici 178px est la largeur du bord gauche -->
				<img src="bd.jpg" alt="" style="float:right;"><!-- on place le coin bas gauche -->
				<img src="bg.jpg" alt="" style="float:left;">	<!-- on place le coin bas droit-->			
			</div>
		</div>
	</div>
</div>

encadrer.zip