Faire border sur img en width et height

Bonjour à tous,

alors voici mon problème, pour mon site internet je souhaiterai une bordure qui fasse tout le tour de la fenêtre, je l'ai donc appliqué à mon fond qui est une image qui s'adapte en width et en height mais malheureusement le contour n'est visible qu'en haut et à gauche, je ne comprend pas pourquoi.

Voici mon code :

Code:

---

<div id="fond"><img src="img/fond.png" class="stretch" alt="fond texture"/></div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#fond{ width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:-1; position:fixed; border: 7px solid #F9094A; }   .stretch { width:100%; height:100%; }

---

Merci à tous.

Bonjour et Bienvenue sur developpez.com,

La position fixed ne vous aidera pas dans ce cas précis.

Une position: absolute; et un box-sizing: border-box; seront tiles :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

img{ display: block; } #fond{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; height:100%; position:absolute; left:0px; top:0px; border: 7px solid #F9094A; }   .stretch { width:100%; height:100%; }

---

http://codepen.io/anon/pen/oLfAc

Hello,

Pour éviter l'utilisation de box-sizing, propriété pas encore finalisée et qui demande encore des préfixes pour certains navigateurs, tu peux renseigner à la fois top,bottom,right et left à 0 et éviter de définir un width et height:

Code:

---

1 2 3 4 5 6

#fond{ position:absolute; left:0px;right:0; top:0px;bottom:0; border: 7px solid #F9094A; }

---

Merci, ça fonctionne très bien :lol:

n'oubliez pas le bouton :resolu: