Background se déforme

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

Je souhaite ne pas déformer mon background quand je réduis la fenêtre de mon écran.

Mon simple code :

HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title> Ma page</title>
</head>
<body>
<div id ="page">
<p>mon paragraphe </p>
</div>
</body>
</html>

CSS:
body
{
background:url(img/MonBackgroud) no-repeat fixed;
background-size : 100% 100%;
}

#page
{
width : 900px;
margin : auto
}



Mon background fait une taille de 1024px*700px


J'ai essayé :
background-size : cover; (comme c'est suggéré dans tous les blogs & forums) et le résultat c'est que l'image prend plus de pixel et donc le bas de l'image ne s'affiche plus
même effet si rajoute top :0; left: 0;

J'espère que ma demande est claire.


Merci.
A voir également:

4 réponses

animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Bonjour
comme ton background est dans body c'est normal que soit l'image se déforme soit elle se coupe quand on réduit la fenetre car la proportion largeur / hauteur de la fenetre ne correspont plus à la proportion image.

En général on ne mets pas un image qui prend toute la page en background dans body
0
partt Messages postés 85 Date d'inscription   Statut Membre Dernière intervention   162
 
Merci Animiostab,

Et dans ce cas que dois je faire?
0
partt Messages postés 85 Date d'inscription   Statut Membre Dernière intervention   162
 
Je dois le mettre dans une div?
0
partt Messages postés 85 Date d'inscription   Statut Membre Dernière intervention   162
 
up
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Tu peux le mettre dans un div qui aura la meme taille que ton image la div en position absolute en fin de page ou en dessous avec z-index (z-index ne s'applique qu'avec des elements positionnés)
0