bonjour/bonsoir ,
Je me permet de proposer une soluce alternative sans javascript et qui risque peut-etre de moins pixelisé l'image toutefois ce "faux-fond etirable" devient fixe en faux background-attachement:fixe;.
copier/coller pour test dans vos navigateurs respectifs
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fond etiré fixe</title>
<style type="text/css">
<!--
body , html {
height:100%;
margin:0;
padding:0;
color:yellow;
font-size:120%;
overflow:hidden;/* on cache les scroll */
background:transparent;/* pour l'exemple */
}
html {
position:relative; /* on prend html en reference qui nous donne la hauteur d'ecran */
z-index:-2; /*on en profite pour le placé derriere l'image */
background:#666; /* pour conserver une possibiliter de lecture des textes en absence d'image .... adapter les couleurs */
}
#contenu {
height:100%;
width:100%;
overflow:auto;/* on met le scroll ici */
position:absolute;/* on decroche du flux html > body
pour devenir la source visuel de l'ensemble du contenu , on ne fait
que remplacé html en fait pour l'affichage */
z-index:0; /* index 0 = conditions habituelles on demarre
la page comme si le support visuel etait html en flux static a z-index:0; par defaut */
}
#fondImg {
position:absolute;/* on la sort du flux */
bottom:0;
width:100%;
height:100%;
z-index:-1;
/* on passe en arriere plan , surtout ne pas donner de couleur ou fond a body,
qui même "decroché" est resté a z-index:0; , valeur par defaut */
}
p {
text-indent:1em;
margin:0.2em;
}
-->
</style>
</head>
<body>
<div>
<!-- pour info :ce div sert a valider en strict , besoin d'un "block" pour depose une image dans le flux du source -->
<img id="fondImg" src="http://www.almageste.net/ClementAssoun/Tests/Ressources/illustration.jpg" />
</div>
<div id="contenu">
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
<p>Hello world !</p> <p>Hello world !</p>
</div>
</body></html>
Une ou 2 breve explication dans le css.
ça passe dans IE6 , Opera 8.54 et Firefox/1.5.0.6.
ça peut aussi servir a une base "faux-frame".
++
<edit>
apres tout pourquoi pas faire usage des deux si js actif ou non :
en prenant la base html de clb56 ou celle que j'ai mis au dessus et en ne modifiant que la partie ou sont declaré les style et javascript , en les remplaçant avec ceci
</title>
<link rel="stylesheet" type="text/css" href="gcyrillus.css" media="screen" title="gcyrillus" />
<link rel="alternate stylesheet" type="text/css" href="clb56.css" media="screen" title="clb56" />
<script type="text/javascript">
window.onload=window.onresize=function() {
setActiveStyleSheet('clb56');
var hauteur_body=document.body.offsetHeight;
document.getElementById('fondImg').style.height=hauteur_body+'px';
}
// source : http://alistapart.com/articles/alternate/
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[ i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
</head>
il faut ressortir les "css" dans leur 2 fichiers respectifs (nommés dans les balises link) et ton gabarit de base beneficie alors des 2 options .
</edit>
<re-edit> a prendre comme un exercice "interessant" , tu risque de lasser et de te lasser rapidement du resultat obtenu </re-edit>
p.s
mieux vaut placé l'image (detourné en fond) apres le contenu dans le html.
Modifié par gcyrillus (23 Sep 2006 - 12:56)
