Image fond a 100% css 3

oasisdudesert Messages postés 27 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je ne m'en sors plus je n'arrive pas a mettre l'image de fond de mon site a 100% en hauteur, ca fonctionne bien en largeur en mettant width a 100% mais la hauteur ne prend pas.
Voici le Css :
form,fieldset,img{border:0;
margin:0;
padding:0}html{height:100%;}body{	margin:0;	font:20px/14px Arial,Helvetica,sans-serif;	background:#000;	color:#F2FAF5;}
a{color:#B1229C;text-decoration:none;}
a:hover{color:#f2d9a7;
}
div.wrapper{	background:url(../images/login/bg-page-revolution.jpg) no-repeat 100% 100%;	overflow:hidden; background-size: 100% 100%;}



div.wrapper-guide{ background:url(../images/login/bg-page-guide-revolution.jpg) no-repeat 100% 100%; background-size: 100%; min-width:100px; min-height:100%; overflow:hidden; width:100%; height:100%;}


* html div.wrapper{height:100%;overflow:visible;}
page{	width:710px;	height:100%; margin:4px auto 0;	overflow:hidden;}
/*header*/
#header{	width:100%;	height:65px;	overflow:hidden;}
/*languages*/
div#networkBar {	background: #000;	padding: 0;	border: 0;	margin: 0;	height: 25px;	width: 100%;	overflow: hidden;}
#header ul.language{	height:11px;	margin:0;	padding:0;	list-style:none;	text-align:center;	overflow:hidden;}
#header ul.language li{display:inline;}
/*two buttons*/
#header ul.buttons{	width:418px;	margin:26px auto 0;	padding:0;	font-size:11px;	line-height:26px;	list-style:none;	overflow:hidden;}
#header ul.buttons li{	float:left;	display:inline;	width:126px;	margin:0 0 0 41px;	text-align:center;}
#header ul.buttons li a{	float:left;	width:102px;	padding:6px 12px;	cursor:pointer;	background:url(../images/login/btn-header.png) no-repeat 0px 0;}
#header ul.buttons .skull {	margin:0;	width:85px;}#header ul.buttons .skull a,#header ul.buttons .skull a:hover{	background:none;	height:50px;	width:50px;}
#header ul.buttons .tour {	margin:0;	width:126px;}#header ul.buttons li a:hover{background:url(../images/login/btn-header-hover.png) no-repeat 0 0;}
/*main*/
#main{width:100%;}#main div.content{	height:100%;	width:351px;	margin:0 auto;	overflow:hidden;}
#main div.content-big{	width:545px;	margin:0 auto;	overflow:hidden;	position:relative;}/*big btn*/
#main div.central-btn{	width:100%;	margin:24px 0 0;	overflow:hidden;}#main div.central-btn-big{	width:100%;	margin:24px 0 0;	overflow:hidden;}
#main div.subscribe a,#main div.central-btn a,#main div.central-btn-big a{	color:#e3b43d;	background:url(../images/login/btn-central.png) no-repeat 0 0;	display:block;  	cursor:pointer;	margin:0 auto;	width:305px;	padding:5px 23px;	font:bold 15px/48px "Times New Roman",Georgia,serif;	text-align:center;}#main div.subscribe a:hover,#main div.central-btn a:hover{	color:#ffde9f;	cursor:pointer;	background:url(../images/login/btn-central-hover.png) no-repeat 0 0;}#main div.central-btn-big a:hover{	color:#ffde9f;	cursor:pointer;	background:url(../images/login/btn-central-hover.png) no-repeat 0 0;}#main div.title {	margin:17px 0 0;	overflow:hidden;	width:100%;}#main div.title h2 {	color:#F2D9A7;	background:url(../images/login/title.png) no-repeat 0 0;	display:block;	margin:0 auto;	width:305px;	padding:8px 23px;	font:19px/48px "Times New Roman",Georgia,serif;	text-align:center;}/*text flag*/#main div.text-flag{	width:261px;	height:160px;	margin:6px auto 0;	margin-left:53px;	overflow:hidden;}#main div.text-flag-big h2 {	text-align:center;	margin: 5px 0;	font-size: 16px;}#main img.story-img {	margin: 0 6px;	text-align: center}.nav-guide {	height:96px;	position:absolute;	top:150px;	width:545px;}.nav-guide-prev {	background:url(../images/login/btn-prev.png) no-repeat 0 0;	float:left;	height: 96px;	width:66px;}a:hover.nav-guide-prev  {	background:url(../images/login/btn-prev-hover.png) no-repeat 0 0;	float:left;	height: 96px;	width:66px;}.nav-guide-next {	background:url(../images/login/btn-next.png) no-repeat 0 0;	float:right;	height: 96px;	width:66px;}a:hover.nav-guide-next  {	background:url(../images/login/btn-next-hover.png) no-repeat 0 0;	float:right;	height: 96px;	width:66px;}#main div.subscribe {	margin:14px auto;	overflow:hidden;	width:100%;}#main div.text-flag-big{	width:450px;	height:333px;	margin:9px auto 0;	overflow:hidden;}#main p{margin:0 0 7px;}#main p.guide-text {	margin: 0 13px 7px;}#main h5{	margin:0;	font-size:11px;	line-height:14px;	text-align:center;}#main h5 a{color:#f2d9a7;}#main h5 a:hover{color:#B1229C;}/*logo*/#main strong.logo{	display:block;	width:290px;	height:86px;	margin:48px auto 0;	text-indent:-9999px;}#main strong.logo a{	display:block;	width:100%;	height:100%;	overflow:hidden;}/*form*/#main div.form{	width:525px;	padding:0 0 0 8px;	margin:63px 0 0 88px;}#main div.form ul{	float:left;	width:110%;	margin:0;	padding:0;	list-style:none;}#main div.form ul li{	float:left;}#main div.form ul.login li{	padding:0 5px 0 4px;}#main div.form ul.login li label{	display:block;	font-size:10px;	line-height:17px;	color:#16D8FA;}#main div.form ul.login li select{	display:block;	width:136px;	color:#866d40;	font-size:11px;}textarea:focus, select:focus, option:focus, input:focus{	outline: none;}#main div.form ul.login li div.bg{	display:block;	width:136px;	background:url(../images/login/bg-input.png) no-repeat 0 0;}#main div.form ul.login li input.text{	display:block;	width:120px;	height:13px;	padding:6px;	border:0;	margin:0;	font-size:11px;	line-height:13px;	color:#866d40;	background:none;}#main div.form ul.login li input.submit{	display:block;	width:93px;	height:38px;	padding:6px;	border:0;	margin:0;	font-size:11px;	line-height:16px;	cursor:pointer;	color:#B1229C;	background:url(../images/login/btn-login.png) no-repeat 0 0;}#main div.form ul.login li input.submit:hover{	color:#ebd6b0;	background:url(../images/login/btn-login-hover.png) no-repeat 0 0;}#main div.form ul.login li div.submit{	position:relative;	margin:10px 0 0 -7px;	background:none;	width:auto;}#main div.form ul.help{	margin:-4px 0 0 -10px;	overflow:hidden;	font-size:10px;	line-height:13px;}#main div.form ul.help li{	padding:0 15px;	border-left:1px solid #16D8FA;	margin:0 0 0 -1px;}#main div.form ul.help li a{color:#16D8FA;}#main div.form ul.help li a:hover{color:#B1229C;}#main div.register {	width:465px;	height: 333px;	margin:10px auto 0;}/*form passwordlost*/#main div.form-passwordlost{	margin:0;	padding:0;}#main div.form-passwordlost ul {	height:60px;	list-style:none;	padding:0;	margin:25px 30px 15px 47px;}#main div.form-passwordlost ul li{	float:left;	display:block;	width:190px;}/*form register*/#main div.form-reg{	float:left;	width:429px;	padding:0;	margin:10px 0 0;}#main div.form-reg ul{	float:left;	margin:5px 0 0;	padding:0;	list-style:none;}#main div.form-reg ul li{	padding:0 0 15px;	float:left;	display:block;}#main .agb-check {	float:left;	margin:5px 10px;}#main p.agb-text {	float:right;	width:160px;}#main div.form-reg ul.login li{	padding:0 ;}#main div.form-passwordlost ul.password li label,#main div.form-reg ul.login li label{	display:block;	font-size:10px;	line-height:17px;	color:#B1229C;	margin: 0 0 0 10px;}#main div.form-reg ul.login li select{	display:block;	width:136px;	color:#F2D9A7;	font-size:11px;}#main div.form-passwordlost .world select.reg-server,#main div.form-reg ul.password li select.reg-server,#main div.form-reg ul.login li select.reg-server{	width:182px;	height:38px;}#main div.form-passwordlost .world {	height:30px;	margin:10px 0 0 47px;}#main div.form-passwordlost .world label {	color:#B1229C;	display:block;	font-size:10px;	line-height:17px;	margin:0 0 0 10px;}#main div.form-reg .selectArea{	height:38px;}#main div.form-passwordlost .world .center,#main div.form-reg .center{	 background: url(../images/login/bg-reg-input.png) no-repeat;	 height: 38px;	 padding:5px 21px 0 14px;}#main div.form-passwordlost .world .selectButton,#main div.form-reg .selectButton {	right:10px;	top:9px;}#main div.form-passwordlost ul.password li div.bg,#main div.form-reg ul.login li div.bg{	display:block;	width:182px;	background:url(../images/login/bg-reg-input.png) no-repeat 0 0;}#main div.form-passwordlost ul.password li input.text,#main div.form-reg ul.login li input.text{	display:block;	width:155px;	height:14px;	padding:12px;	border:0;	margin:0;	font-size:11px;	line-height:13px;	color:#866d40;	background:none;	/*needed to fix IE6 Bug with PNG alpha problem and clickability*/	position:relative;}#main div.form-passwordlost input.submit,#main div.form-reg .right-col input.submit{	display:inline;	background:url(../images/login/btn-reg.png) no-repeat 0 0;	border:0;	cursor:pointer;	color:#6c6e5f;	font-size:15px;	font-family:"Times New Roman",Georgia,serif;	text-transform: uppercase;	height:57px;	line-height:16px;	margin:0;	padding:6px;	width:221px;}#main div.form-passwordlost input.submit:hover,#main div.form-reg .right-col input.submit:hover,#main div.form-reg ul.login li input.submit:hover{	color:#F2D9A7;	background:url(../images/login/btn-reg-hover.png) no-repeat 0 0;}#main div.form-reg ul.login li div.submit{	position:absolute;	background:none;	width:auto;  	margin:210px 0 0 200px;}.buttonSubmit {	text-align: center;}.left-col {	float:left;	width: 200px;}.right-col {	float:left;	width: 200px;}/*footer*/#footer{	margin:54px 0 0;	padding:0 0 20px;	text-align:center;	font-size:12px;	color:#16D8FA;}#footer p{	display:inline;	margin:0;}#footer ul{	display:inline;	margin:0;	padding:0;	list-style:none;}#footer ul li{	display:inline;	padding:0 4px;	border-left:1px solid #16D8FA;}#footer ul li:first-child{	border:0;}#footer ul li a{color:#16D8FA;}#footer ul li a:hover{color:#48B2F8;}select { font-family: verdana; font-size: 10px;color: #16269E; background:url(../images/login/select-bg.png); border: #2a2a2a solid 3px} 


et donc ce qu'il donne avec l'image bien etirée en largeur mais pas en hauteur :

https://i.imgur.com/ebJfplA.jpg

Peut on me dire ce qui cloche pour que mon fond ne saffiche pas a 100% de la hauteur de l'ecran ?
A voir également:

3 réponses

animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut

esaie déja de mettre

html {height:100%;}

body {height:100%; min-height:100%;}

puis background-size:cover; pour le background
0
oasisdudesert Messages postés 27 Date d'inscription   Statut Membre Dernière intervention  
 
Merci de ton aide animostab,

Voici comment j'ai integré ce que tu me propose :

form,fieldset,img{border:0;
margin:0;
padding:0}html{height:100%;}

body {height:100%; min-height:100%; margin:0; font:20px/14px Arial,Helvetica,sans-serif; background:#000; color:#F2FAF5;}
a{color:#B1229C;text-decoration:none;}
a:hover{color:#f2d9a7;
}
div.wrapper{ background:url(../images/login/bg-page-revolution.jpg) no-repeat ; overflow:hidden; background-size:cover;}


Et ce que ca donne :

https://i.imgur.com/kbuzTKr.jpg

J'ai toujours cette foutue bande noire en bas :s
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
c'est ton div.wrapper qui ne prend pas toute la hauteur. Pourquoi ne pas mettre ton image de fond sur body à la place ?

avec le background-size: cover tu es sur qu'il prendra toute la page
0
oasisdudesert Messages postés 27 Date d'inscription   Statut Membre Dernière intervention  
 
Ohhh genial , en mettant :

no-repeat 100% 100%; background-size: cover; min-width:100px; min-height:100%; overflow:hidden; width:100%; height:100%;}


Ca fonctionne impeccable !

Merci mille fois animostab

http://www.battlestars.fr
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
tu peux mettre en résolu
0
oasisdudesert Messages postés 27 Date d'inscription   Statut Membre Dernière intervention  
 
Oups bah non pas encore , car j'ai toujours un soucis maintenant lors du dezoom navigateur l'image ne change pas de taille et du coup les textes deviennent décalés. Par ailleurs l'affichage est different selon les ecrans (4/3 et 16/9) je ne comprend vraiment pas,

Affichage chez moi à 100% du navigateur : https://i.imgur.com/64avF8q.jpg
Affichage a 70% : https://i.imgur.com/RPkx0dd.jpg

Et mon css :
form,fieldset,img{border:0;
margin:0;
padding:0}html{height:100%;}

body {height:100%;position : relative; margin:0;	font:20px/14px Arial,Helvetica,sans-serif;	background:#000;	color:#F2FAF5;}
a{color:#B1229C;text-decoration:none;}
a:hover{color:#f2d9a7;
}
div.wrapper{	background:url(../images/login/bg-page-revolution.jpg) no-repeat ;position : relative; background-size: cover;  overflow:hidden; }



div.wrapper-guide{ background:url(../images/login/bg-page-guide-revolution.jpg) no-repeat 100% 100%; background-size: cover; min-width:100px; min-height:100%; overflow:hidden; width:100%; height:100%;}


* html div.wrapper{height:100%;overflow:visible;}
#page{	width:710px;	height:100%; margin:4px auto 0;	overflow:hidden;}
/*header*/
#header{	width:100%;	height:65px;	overflow:hidden;}
/*languages*/
div#networkBar {	background: #000;	padding: 0;	border: 0;	margin: 0;	height: 25px;	width: 100%;	overflow: hidden;}
#header ul.language{	height:11px;	margin:0;	padding:0;	list-style:none;	text-align:center;	overflow:hidden;}
#header ul.language li{display:inline;}
/*two buttons*/
#header ul.buttons{	width:418px;	margin:26px auto 0;	padding:0;	font-size:11px;	line-height:26px;	list-style:none;	overflow:hidden;}
#header ul.buttons li{	float:left;	display:inline;	width:126px;	margin:0 0 0 41px;	text-align:center;}
#header ul.buttons li a{	float:left;	width:102px;	padding:6px 12px;	cursor:pointer;	background:url(../images/login/btn-header.png) no-repeat 0px 0;}
#header ul.buttons .skull {	margin:0;	width:85px;}
#header ul.buttons .skull a,
#header ul.buttons .skull 
a:hover{	background:none;	height:50px;	width:50px;}
#header ul.buttons .tour {	margin:0;	width:126px;}
#header ul.buttons li a:hover{background:url(../images/login/btn-header-hover.png) no-repeat 0 0;}
/*main*/
#main{width:100%;}
#main div.content{	height:100%;	width:351px;	margin:0 auto;	overflow:hidden;}
#main div.content-big{	width:545px;	margin:0 auto;	overflow:hidden;	position:relative;}/*big btn*/
#main div.central-btn{	width:100%;	margin:32% -20px 0;	overflow:hidden;}
#main div.central-btn-big{	width:100%;	margin:24px 0 0;	overflow:hidden;}
#main div.subscribe a,
#main div.central-btn a,
#main div.central-btn-big a{	color:#e3b43d;	background:url(../images/login/btn-central.png) no-repeat 0 0;	display:block;  	cursor:pointer;	margin:0 auto;	width:305px;	padding:5px 23px;	font:bold 15px/48px "Times New Roman",Georgia,serif;	text-align:center;}
#main div.subscribe a:hover,
#main div.central-btn a:hover{	color:#ffde9f;	cursor:pointer;	background:url(../images/login/btn-central-hover.png) no-repeat 0 0;}
#main div.central-btn-big a:hover{	color:#ffde9f;	cursor:pointer;	background:url(../images/login/btn-central-hover.png) no-repeat 0 0;}
#main div.title {	margin:17px 0 0;	overflow:hidden;	width:100%;}
#main div.title h2 {	color:#F2D9A7;	background:url(../images/login/title.png) no-repeat 0 0;	display:block;	margin:0 auto;	width:305px;	padding:8px 23px;	font:19px/48px "Times New Roman",Georgia,serif;	text-align:center;}/*text flag*/
#main div.text-flag{position : relative;line-height: 140%; letter-spacing: 3px; text-shadow: 0 0 7px #1E90FF;
background:transparent;
color: #1E90FF; width:300px;	height:250px;	margin:20px auto 0;	margin-left:20px;	overflow:hidden;}
#main div.text-flag-big h2 {	text-align:center;	margin: 5px 0;	font-family: Geneva, serif;
line-height: 1em;
color: #fff9d6;
font-weight:bold;
font-size: 24px;
text-shadow:0px 0px 0 rgb(201,201,201),1px 1px 0 rgb(158,158,158),2px 2px 0 rgb(114,114,114), 3px 3px 0 rgb(70,70,70),4px 4px 3px rgba(0,0,0,0.95),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);}
#main img.story-img {	margin: 0 6px;	text-align: center}.nav-guide {	height:96px;	position:absolute;	top:150px;	width:545px;}.nav-guide-prev {	background:url(../images/login/btn-prev.png) no-repeat 0 0;	float:left;	height: 96px;	width:66px;}a:hover.nav-guide-prev  {	background:url(../images/login/btn-prev-hover.png) no-repeat 0 0;	float:left;	height: 96px;	width:66px;}.nav-guide-next {	background:url(../images/login/btn-next.png) no-repeat 0 0;	float:right;	height: 96px;	width:66px;}
a:hover.nav-guide-next  {	background:url(../images/login/btn-next-hover.png) no-repeat 0 0;	float:right;	height: 96px;	width:66px;}
#main div.subscribe {	margin:14px auto;	overflow:hidden;	width:100%;}
#main div.text-flag-big{	width:450px;	height:333px;	margin:9px auto 0;	overflow:hidden;}
#main p{margin:0 0 7px;}
#main p.guide-text {	margin: 0 13px 7px;}
#main h5{	margin:0;	font-size:11px;	line-height:14px;	text-align:center;}
#main h5 a{color:#f2d9a7;}
#main h5 a:hover{color:#B1229C;}/*logo*/
#main strong.logo{	display:block;	width:290px;	height:86px;	margin:48px auto 0;	text-indent:-9999px;}
#main strong.logo a{	display:block;	width:100%;	height:100%;	overflow:hidden;}/*form*/
#main div.form{	width:525px;	padding:0 0 0 8px;	margin:31% 0 0 88px;}
#main div.form ul{	float:left;	width:110%;	margin:0;	padding:0;	list-style:none;}
#main div.form ul li{	float:left;}
#main div.form ul.login li{	padding:0 5px 0 4px;}
#main div.form ul.login li label{	display:block;	font-size:15px;	line-height:20px;	color:#16D8FA;}
#main div.form ul.login li select{	display:block;	width:136px;	color:#866d40;	font-size:15px;}textarea:focus, select:focus, option:focus, input:focus{	outline: none;}
#main div.form ul.login li div.bg{	display:block;	width:145px;	background:url(../images/login/bg-input.png) no-repeat 0 0;}
#main div.form ul.login li input.text{	display:block;	width:120px;	height:13px;	padding:6px;	border:0;	margin:0;	font-size:15px;	line-height:18px;	color:#866d40;	background:none;}
#main div.form ul.login li input.submit{	display:block;	width:93px;	height:38px;	padding:4px;	border:0;	margin:-3px;	font-size:14px;	line-height:20px;	cursor:pointer;	color:#14FCE5;	background:url(../images/login/btn-login.png) no-repeat 0 0;}
#main div.form ul.login li input.submit:hover{	color:#ebd6b0;	background:url(../images/login/btn-login-hover.png) no-repeat 0 0;}
#main div.form ul.login li div.submit{	position:relative;	margin:10px 0 0 -7px;	background:none;	width:auto;}
#main div.form ul.help{	margin:-4px 0 0 -10px;	overflow:hidden;	font-size:15px;	line-height:20px;}
#main div.form ul.help li{	padding:0 15px;	border-left:1px solid #16D8FA;	margin:0 0 0 -1px;}
#main div.form ul.help li a{color:#16D8FA;}
#main div.form ul.help li a:hover{color:#B1229C;}
#main div.register {	width:465px;	height: 333px;	margin:10px auto 0;}
/*form passwordlost*/
#main div.form-passwordlost{	margin:0;	padding:0;}
#main div.form-passwordlost ul {	height:60px;	list-style:none;	padding:0;	margin:25px 30px 15px 47px;}
#main div.form-passwordlost ul li{	float:left;	display:block;	width:190px;}
/*form register*/
#main div.form-reg{	float:left;	width:429px;	padding:0;	margin:10px 0 0;}
#main div.form-reg ul{	float:left;	margin:5px 0 0;	padding:0;	list-style:none;}
#main div.form-reg ul li{	padding:0 0 15px;	float:left;	display:block;}
#main .agb-check {	float:left;	margin:5px 10px;}
#main p.agb-text {	float:right;	width:160px;}
#main div.form-reg ul.login li{	padding:0 ;}
#main div.form-passwordlost ul.password li label,
#main div.form-reg ul.login li label{	display:block;	font-size:10px;	line-height:17px;	color:#B1229C;	margin: 0 0 0 10px;}
#main div.form-reg ul.login li select{	display:block;	width:136px;	color:#F2D9A7;	font-size:11px;}
#main div.form-passwordlost .world select.reg-server,
#main div.form-reg ul.password li select.reg-server,
#main div.form-reg ul.login li select.reg-server{	width:182px;	height:38px;}
#main div.form-passwordlost .world {	height:30px;	margin:10px 0 0 47px;}
#main div.form-passwordlost .world label {	color:#B1229C;	display:block;	font-size:10px;	line-height:17px;	margin:0 0 0 10px;}
#main div.form-reg .selectArea{	height:38px;}
#main div.form-passwordlost .world .center,
#main div.form-reg .center{	 background: url(../images/login/bg-reg-input.png) no-repeat;	 height: 38px;	 padding:5px 21px 0 14px;}
#main div.form-passwordlost .world .selectButton,
#main div.form-reg .selectButton {	right:10px;	top:9px;}
#main div.form-passwordlost ul.password li div.bg,
#main div.form-reg ul.login li div.bg{	display:block;	width:182px;	background:url(../images/login/bg-reg-input.png) no-repeat 0 0;}
#main div.form-passwordlost ul.password li input.text,
#main div.form-reg ul.login li input.text{	display:block;	width:155px;	height:14px;	padding:12px;	border:0;	margin:0;	font-size:11px;	line-height:13px;	color:#866d40;	background:none;	
/*needed to fix IE6 Bug with PNG alpha problem and clickability*/	position:relative;}
#main div.form-passwordlost input.submit,
#main div.form-reg .right-col input.submit{	display:inline;	background:url(../images/login/btn-reg.png) no-repeat 0 0;	border:0;	cursor:pointer;	color:#6c6e5f;	font-size:15px;	font-family:"Times New Roman",Georgia,serif;	text-transform: uppercase;	height:57px;	line-height:16px;	margin:0;	padding:6px;	width:221px;}
#main div.form-passwordlost input.submit:hover,
#main div.form-reg .right-col input.submit:hover,
#main div.form-reg ul.login li input.submit:hover{	color:#F2D9A7;	background:url(../images/login/btn-reg-hover.png) no-repeat 0 0;}
#main div.form-reg ul.login li div.submit{	position:absolute;	background:none;	width:auto;  	margin:210px 0 0 200px;}.buttonSubmit {	text-align: center;}.left-col {	float:left;	width: 200px;}.right-col {	float:left;	width: 200px;}
/*footer*/
#footer{	margin:54px 0 0;	padding:10% 0 20px;	text-align:center;	font-size:15px;	color:#16D8FA;}
#footer p{	display:inline;	margin:0;}
#footer ul{	display:inline;	margin:0;	padding:0;	list-style:none;}
#footer ul li{	display:inline;	padding:0 4px;	border-left:1px solid #16D8FA;}
#footer ul li:first-child{	border:0;}
#footer ul li a{color:#16D8FA;}
#footer ul li a:hover{color:#48B2F8;}select { font-family: verdana; font-size: 10px;color: #16269E; background:url(../images/login/select-bg.png); border: #2a2a2a solid 3px} 


Merci encore à ceux qui voudront bien y jeter un oeil pour que l'affichage soit adapté a tous les ecrans.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Mets le background dans body et pas dans wrapper

d'autre part le zoom ou dézoom sur texte uniquement provoque souvent des erreur d'affichage
0