02-05-2013, 03:46 PM
(Modification du message : 02-05-2013, 05:02 PM par starmindfr.)
(03-04-2013, 11:45 AM)Harparine a écrit : Salut, il faut effectivement plusieurs images (pour les coins aussi).
Tu peux le faire à l'ancienne, avec des div imbriquées transparentes contenant chacune des images répétées en background. Ca passe partout mais c'est lourd et ça n'a aucun sens dans ton code HTML. Exemple :
Sinon, il y a (beaucoup) plus élégant en CSS3 :
Code :<div class="general-document">
Contenu
</div>
.general-document {
background-color: #f5f6f6;
background:
url("../img/design/infos_general_head_right.png") no-repeat top right,
url("../img/design/infos_general_head_left.png") no-repeat top left,
url("../img/design/infos_general_foot_right.png") no-repeat bottom right,
url("../img/design/infos_general_foot_left.png") no-repeat bottom left,
url("../img/design/infos_general_body_right.png") repeat-y top right,
url("../img/design/infos_general_body_left.png") repeat-y top left,
url("../img/design/infos_general_head_back.png") repeat-x top left,
url("../img/design/infos_general_foot_back.png") repeat-x bottom left,
#f5f6f6;
border: none;
padding: 40px;
margin: 0px;
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
Bonjour
Merci j'ai donc adapter le code ci dessus, ca marche bien par contre il me manque surement une petite astuce :
L’intérieur de la boite n'est pas un fond unis mais plutôt semi transparent, et si je met un fond non transparent sur mes angles, ca cache bien les extrémités des cadres, mais ca déborde sur le fond transparent, a l'inverse si je laisse un fond transparent sur les angles, il est possible de voir le chevauchement des extrémités.
Une astuce pour ne pas faire aller le repeat sur 100% ou autre idée ?
Voila l'exemple sans font transparent :