Avoir une bordure image

Version imprimable

16/06/2015, 23h18
many84

Avoir une bordure image

Bonsoir,
j'aimerais avoir une bordure image
Pouvez-vous m'aider s'il vous plaît ?
Je suis sur wordpress

Vous pouvez (si le navigateur le supporte) utiliser une propriété CSS appelée border-image.
Voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
div {
  border-image:
    url(/lien/vers/mon_image.png)
    30 /* hauteur (px) */
    30 /* largeur */
    repeat /* rendu du milieu des bordures horizontales */
    /* repeat */ /* bordures verticales (inutile si même valeur que précédente) */
;
}

17/06/2015, 08h59
Invité
Bonjour,
voici comment obtenir une double bordure blanc/rose autour de l'image :
Code:

1 2 3 4 img { padding:8px; background:#fff; /* blanc */ border:10px solid #fde7e7; /* rose */ }
Si tu veux vraiment que les bordures n'aient pas la même épaisseur :
(comme sur l'image fournie)
Code:

1 2 3 4 5 6 img { padding:8px 17px; background:#fff; /* blanc */ border:10px solid #fde7e7; /* rose */ border-top:14px solid #fde7e7; border-bottom:14px solid #fde7e7; }
N.B. Pour info, une balise img s'écrit avec un attribut alt :

Code:

<img src="..." alt="" />
- alt permet de mettre un texte alternatif
on peut aussi ajouter un attribut title="..." pour l'accessibilité (mal-voyant) sur les boutons-images (comme sur ton site).
17/06/2015, 13h43
many84

Bonjour,
Merci infiniment, mais même avec le code image j'ai du mal car en gros, je cherche à mettre une image pour le haut et le bas, et une autre pour les côtés.

Ce code c'est celui que j'ai pour les bordures de couleurs.

Merci pour tout
17/06/2015, 15h58
Invité

Bonjour,
quel intérêt de mettre 4 images, là une une seule suffit ??? :koi:

Même avec une image texturée, une image carrée 10x10px ou 20x20px devrait être suffisante (avec un "repeat") :

D'autant plus que le code que j'ai proposé donne un résultat très similaire, avec simplement une couleur (sans texture).
As-tu au moins eu la curiosité de tester ? :roll:
17/06/2015, 16h06
many84

Oui bien sur j'ai testé, il y a une option de prévisualisation ;)
Pour l'image je ne savais pas merci.

1 pièce(s) jointe(s)

avec une image carrée 14x14px (par exemple) :

Code:

1
2
3
4
5
6
img {
  position:relative; 
  padding:8px 17px; background:#fff; /* blanc */
  border-width:10px 15px; border-style:solid;
  border-image: url(http://www.developpez.net/forums/attachments/p180869d1434551625/webmasters-developpement-web/mise-page-css/bordure-image/imgbg.png) 20% round;
}

=> image ici : Pièce jointe 180869

17/06/2015, 18h29
many84

Waouh super ! Merci mille fois :D !