Salut à tous,
je recherche un moyen de faire en sorte que mon background sur body soit adaptable à la résolution d'ecran...
en gros c'est pour passer une photo et que celle-ci s'adapte à la resolution pour atteindre le width:100%; height:100%...
j'ai trouver un hack via css qui joue sur les Z-index mais qui me force à inserer une balise <img> dans le html (de plus il n'y a pas moyen de fixer un background-attachement: fixed; et l'image defile avec le scroll)
j'ai bien sur l'aternative javascript qui me permet de detecter la resolution et qui rebalance une image au bonne dimension en background directement en inserant un attibut style à la balise <body> (<body style="background-image: ../image_adapté.gif">)
J'aimerai bien me passer de javascript car cela oblige d'avoir plusieurs images...
si quelqu'un voit mieux que cette exemple coté de CSS pour surtout avoir prise en compte du background-attachement et si possible ce passer de la balise <img> dans le html
genre un pure hack CSS qui m'adapte mon background-image du boby...
merci d'avanc pour l'idée de genie
Modifié par beroots (04 Mar 2008 - 03:40)
je recherche un moyen de faire en sorte que mon background sur body soit adaptable à la résolution d'ecran...
en gros c'est pour passer une photo et que celle-ci s'adapte à la resolution pour atteindre le width:100%; height:100%...
j'ai trouver un hack via css qui joue sur les Z-index mais qui me force à inserer une balise <img> dans le html (de plus il n'y a pas moyen de fixer un background-attachement: fixed; et l'image defile avec le scroll)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*valeurs par defaut pour tout les navigateurs */
/* ne pas modifié a partir d'ici */
* { margin:0;padding:0;}
/* taille de reference */
html {
height:100%;
width:100%;
}
/*on applique une taille et on place en absolute l'image et son conteneur */
html img.imghtml, html div.imghtml{
width:100%;height:100%;
top:0;
left:0;
position:absolute;
}
html, html * {
position:relative;
z-index:0;
}
body {
z-index:2; /* pour afficher tout au dessus de l'image */
width:100%;
height:100%;
}
/*ne pas modifier le css au dessus de cette ligne */
/* vous pouvez a partir de la modifié et ajouter votre css */
/* conteneur de votre page */
#corps {
width:80%; /* pour le centré ,facultati f*/
height:100%;
border:3px solid #666;/*facultatif*/
margin:auto; /* pour le centré ,facultati f*/
scroll:auto;/* pour IE ? */
}
#demo{text-align:center;top:45%;font-size:30px;color:#FE1300;}
/* fin des styles */
</style>
</head>
<body><div class="imghtml"><!-- c'est cette image qui sert de fond d'ecran --><img class="imghtml" src="http://gcyrillus.free.fr/essai/sphere.jpg" alt="fond d'ecran" title="" /></div>
<div id="corps"><p id="demo">mettre la page ici !</p></div>
</body>
</html>j'ai bien sur l'aternative javascript qui me permet de detecter la resolution et qui rebalance une image au bonne dimension en background directement en inserant un attibut style à la balise <body> (<body style="background-image: ../image_adapté.gif">)
J'aimerai bien me passer de javascript car cela oblige d'avoir plusieurs images...
si quelqu'un voit mieux que cette exemple coté de CSS pour surtout avoir prise en compte du background-attachement et si possible ce passer de la balise <img> dans le html
genre un pure hack CSS qui m'adapte mon background-image du boby...
merci d'avanc pour l'idée de genie
Modifié par beroots (04 Mar 2008 - 03:40)