Background se déforme
partt
Messages postés
90
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 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.
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.
4 réponses
-
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
-
-
-
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)
