Bonjour à tous,
Découvrant depuis peu la propriété "border-image", bien intéressante pour pas mal de raisons (bien que ne fonctionnant pas sous IE
), je suis en train de la tester et, rien à faire, la bordure d'image n'apparaît pas dans un navigateur de prévisualisation (firefox)
Voici l'image qui doit être affectée à ces bordures, sur un élément #page :
http://nsa32.casimages.com/img/2013/02/09/130209123948395570.png
Donc l'idée n'est pas sorcière : je veux récupérer sur 30 pixels les éléments dessinés latéralement. Idem pour la ligne du haut, sur 15 px.
Voici mon code :
CSS :
.imageBordurePage { /* bordure de la #page */
border-width: 15px 30px;
-moz-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
-webkit-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
-o-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
}
Html :
<div id="page" class="imageBordurePage">
Je vois bien que l'élément #page prend les attributs, en largeur, de cette bordure. Donc c'est correctement écrit concernant la propriété.
Mais les bordures de l'image n'apparaissent pas.
J'ai 2 autres éléments sur ma page avec cette propriété "border-image", et j'ai même résultat : je vois bien de la bordure, du moins de l'espace-bordure qui s'est créé, mais pas d' images.
Pour ces 2 autres éléments :
-> J'ai appliqué sur un élément #piedepage cette propriété, là sur la bordure haute.
-> J'ai appliqué aussi sur mon #body cette propriété sur la bordure haute : là c'est pire car je n'ai pas cet espace "bordure" qui se crée, contrairement à mes éléments #page et #piedepage.
Donc problèmes sur le chemin des images ?
Je l'ai réécrit 20 fois, dans toutes les possibilités (même si à priori ça me semble écrit correctement...)
Mon arborescence :
--- mes fichiers html
|_ répertoire "css"
|_ répertoire '"images"
Merci de votre aide
Découvrant depuis peu la propriété "border-image", bien intéressante pour pas mal de raisons (bien que ne fonctionnant pas sous IE
), je suis en train de la tester et, rien à faire, la bordure d'image n'apparaît pas dans un navigateur de prévisualisation (firefox)Voici l'image qui doit être affectée à ces bordures, sur un élément #page :
http://nsa32.casimages.com/img/2013/02/09/130209123948395570.png
Donc l'idée n'est pas sorcière : je veux récupérer sur 30 pixels les éléments dessinés latéralement. Idem pour la ligne du haut, sur 15 px.
Voici mon code :
CSS :
.imageBordurePage { /* bordure de la #page */
border-width: 15px 30px;
-moz-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
-webkit-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
-o-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
}
Html :
<div id="page" class="imageBordurePage">
Je vois bien que l'élément #page prend les attributs, en largeur, de cette bordure. Donc c'est correctement écrit concernant la propriété.
Mais les bordures de l'image n'apparaissent pas.
J'ai 2 autres éléments sur ma page avec cette propriété "border-image", et j'ai même résultat : je vois bien de la bordure, du moins de l'espace-bordure qui s'est créé, mais pas d' images.
Pour ces 2 autres éléments :
-> J'ai appliqué sur un élément #piedepage cette propriété, là sur la bordure haute.
-> J'ai appliqué aussi sur mon #body cette propriété sur la bordure haute : là c'est pire car je n'ai pas cet espace "bordure" qui se crée, contrairement à mes éléments #page et #piedepage.
Donc problèmes sur le chemin des images ?
Je l'ai réécrit 20 fois, dans toutes les possibilités (même si à priori ça me semble écrit correctement...)
Mon arborescence :
--- mes fichiers html
|_ répertoire "css"
|_ répertoire '"images"
Merci de votre aide