Image en background qui s'étire selon la résolution mais pas mosaïque

par AB » 20 mars 2008, 15:51

A priori j'opterais plutôt vers une détection de la résolution en javascript et suivant la valeur trouvée faire afficher (toujours en javascript) une image de dimension différente au background

Code : Tout sélectionner

<script type="text/javascript">
function img_fond(id) {

var widthresol=  screen.width;
var heighthresol= screen.height;

var img_back;

//dans l'exemple je ne me sert que de la largeur et de deux photos (deux possibilités) mais tu pourrais faire des tests également pour la hauteur, faire plus de conditionss et utiliser plus de photos

if(widthresol <= 1024) img_back = 'PHOTO/photo1.jpg'; else img_back = 'PHOTO/photo2.jpg';

var id_back = document.getElementById(id);

id_back.style.backgroundPosition = 'center';
id_back.style.backgroundRepeat = 'no-repeat';
id_back.style.backgroundImage = "url(" + img_back + ")";
}


</script>

</head>

<body id = "bod" onload = "img_fond('bod')">

bla bla

</body>
</html>

par **catseyes** » 20 mars 2008, 14:18

Bonjour,

Le sujet est assez parlant mais je voulais savoir comment faire, j'ai bien cherché sur le net mais j'ai rien trouvé de concret. Je pensais à la surperposition de calques via les z-index, c'est ca la (seule) soluce ? Comment faire également car je maitrise mal ?

Bisous

catseyes

Image en background qui s'étire selon la résolution mais pas mosaïque

Répondre

Étendre la vue Revue du sujet : Image en background qui s'étire selon la résolution mais pas mosaïque

Image en background qui s'étire selon la résolution mais pas