Discussion :

[lepepino]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rodolphebrd]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Candygirl]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#fond{ 
   position:absolute;
   left:0px;right:0;
   top:0px;bottom:0;
   border: 7px solid #F9094A; 
}

[lepepino]

Merci, ça fonctionne très bien

[rodolphebrd]

n'oubliez pas le bouton