Problème de background avec css Fermé

Question

Bonjour, 

Configuration: Windows 7 / Firefox 10.0.2

Je suis actuellement en train de créer un site internet pour mon activité et j'ai un soucis avec mon image de fond. Je débute dans le langage html et css et il y a sans doute des erreurs dans mon fichier css. 
Quand ma page internet est sur tout mon écran je n'ai aucun soucis mais quand je mets ma page internet sur le côté avec windows 7 pour avoir ma page réduite de moitié mon fond est décalé vers la gauche et n'est pas complet. Mon image de fond fait 1108x1200 px.

Voici mes données css :
*{font-family: arial; /*appliqué à  tout*/
 background-repeat: no-repeat;
 margin:auto} /*marge extérieure*/
h1{color: #3300FF; /*uniquement titre 1*/
 margin: 0.5em auto;
 padding-left: 12em; /*marge intérieure*/
 font-size: 25px} 
h2{color: #FF6600; /*uniquement titre 2*/
 font-size: 22px;
 background-image: url('none');
 background-color: transparent;
 margin: 1em auto;
 padding-left: 15em}
li {font-size: 18px; /*mise en page des niveaux 1 (puces)*/
 margin-left: 20em;
 width: 56%;
 text-align: justify;
 padding-bottom: 1em;
 padding-left: 1em;
 list-style-image : url(Images/puce3.jpg)}
li li {  /*mise en page des niveaux 2 (puces)*/
 font-size: 14px;
 margin-left: 0em;
 width: 99%;
 text-align: justify;
 margin-top: 1em;
 list-style-image : url(Images/puce2.jpg)}
p {margin-left: 15em;
 padding-bottom: 2em;
 padding-left: 4em;
 font-size: 18px;
 text-align: justify;
 width: 60%;
 min-width: 400px;
 padding-top: 1em}
body {background-repeat: no repeat; 
 background-position: center; 
 margin: 0 auto;
 background-image: url('images/fond4.jpg');
 font-size: 10pt; 
 color: #3F3F3F; 
 font-family: Century Gothic, Sans-Serif}
a[href] {color: black; /*pour les liens vers d'autres pages'*/
 text-decoration: underline;}
a[name]{/*aucun style particulier*/}
#carte {margin-left: 30em;
  margin-bottom: 2em}
#contenu {margin: 80px 50px 50px 50px;
 height: 70em; /*permet de donner une hauteur au contenu pour que le pied de page reste en bas de la page*/}
#entete {margin-top: 2em}
#fond.contenu {margin : 0px 200px 0px 300px;
 background-image: url('images/fond.contenu.1.png')}
#image{float: left;
  margin-left: 13em;
  margin-top: 0em;
  position: absolute}
div#menu{width: 10.2em; /*le menu*/
 margin: 0em;
 float: left;
 text-align: center;
 color: black;
 background-color: #cfdded;
 border-radius: 10px;
 margin-left: 8em}
div#menu ul {padding: 1em; /*pour la première liste*/
 width: 130px;
 border: 1px outset;
 margin: 0px;
 border-radius: 10px;
 background-color: #CCE6FF;
 position: absolute}
div#menu ul ul {display: none; /*pour la 2e liste*/
 position: absolute;
 padding: 2em;
 top: 0;
 left: 7.7em;
 margin: 0;
 padding: 0;
 border: 1px outset black;
 background-color: #cfdded;
 width: 6.9em}
div#menu ul ul ul {left: 9em;
  width: 8.9em;
  background-color: #cfdded;}
div#menu li {position: relative; /*style du premier niveau*/
 list-style: none;
 border-bottom: 1px outset;
 width: 96px;
 padding: 1em;
 margin: 0px;
 background-color: #CCE6FF;}
div#menu li a {text-decoration: none}
div#menu li:hover {background-color: #CCCCFF}
div#menu ul.niveau1 li:hover ul.niveau2 {display: block;
 background-color: #FFFFFF}
div#menu ul.niveau2 li:hover ul.niveau3 {display: block;
 background-color: #FFFFFF}
#menu .actuel {font-weight: bold;
 text-decoration: underline;
 background-color: none}
#menu a:visited {color: #3D3D3D}
#nom {text-align: center;
 font-size: 50px;
 font-family: "freestyle script";
 color: #ffab00;
 background-color: #3D7EFF;
 width: 10em;
 background-position:center;
 border-radius: 10px;
 margin-right: 6em;
 border: 1px outset black;
 box-shadow: 8px 8px 5px #aaa;
 position: relative;
 margin-left: 10em}
 #pied{clear: both; /*pied de page*/
 font-size: 12px;
 height: 60px;
 text-align: center;
 color: black;
 position: absolute; top: 90em; left: 40%}
#question {text-align: center;
  margin-left: 10em;
  font-size: 24px}


Je vous remercie par avance pour le temps passer à regarder mes données.

Fugu · Answer

Bonsoir,

Un fond de 1108*1200? Cela oblige L'utilisateur à avoir exactement la même taille d'écran que vous. Donc votre site ne s'affiche sans erreur(affichage) que pour les gens qui ont exactement la même résolution que vous. Ce qui laisse pour les autres, 90% des internautes. Vous devez concevoir votre mise en page en découpant les images par zones et en utilisant au maximum des tailles en proportions(% et quadratin(em)).

Pour le css afficher une image de fond d'une balise se fait avec la propriétés background-images: url('adresse_de_l_image.ext'); , la position de l'image dans cette balise se fait avec background-position: 50 50; (ici le premier 50 indique la position horizontale et le suivant verticale).
Ce lien détailles les autres propriétés de l'image de fond en CSS(background) 

http://www.w3schools.com/cssref/css3_pr_background.asp

nanayelle · Answer

Mon écran n'a pas une résolution de 1108*1200, c'est mon image qui fait cette taille là. Donc quand j'ai ma page web sur tout mon écran j'ai des bandes blanches sur les côtés et normalement la plupart des internautes ayant un écran de minimum 15" devraient avoir ça sur leur écran. En fait quand je diminue la largeur de ma page internet vers la droite par exemple mon image de fond se décale en même temps vers la droite.

Quand vous parlez de mise en page en découpant les images par zones est-ce que vous parlez de ce type de découpage : http://forums.phpbb-fr.com/tutoriaux-phpbb/sujet150089.html ?

Problème de background avec css

2 réponses

Discussions similaires