Avoir un fond qui s'adapte !?

[FrenchyNeo]

Bonjour à tous.

Voilà que depuis hier soir je recherche un script, un CSS, un code magique en vain, pour avoir le moyen d'adapter une image suivant la résolution de l'écran de la personne.

Voilà le dernier que j'ai retenu, qui marche chez moi :

<script type="text/javascript">
var resolution = screen.width + "*" + screen.height;
switch(resolution)
{
 case "800*600":
	  document.body.background = "bg800-600.jpg";
	  break;
 case "1024*768":
	  document.body.background = "bg1024-768.jpg";
	  break;
 case "1152*864":
	  document.body.background = "bg1152-864.jpg";
	  break;
 case "1280*720":
	  document.body.background = "bg1280-720.jpg";
	  break;
 case "1280*768":
	  document.body.background = "bg1280-768.jpg";
	  break;
 case "1280*800":
	  document.body.background = "bg1280-800.jpg";
	  break;
 case "1280*960":
	  document.body.background = "bg1280-960.jpg";
	  break;
 case "1280*1024":
	  document.body.background = "bg1280-1024.jpg";
	  break;
 case "1360*768":
	  document.body.background = "bg1360-768.jpg";
	  break;
 case "1600*900":
	  document.body.background = "bg1600-900.jpg";
	  break;
 case "1600*1024":
	  document.body.background = "bg1600-1024.jpg";
	  break;
 case "1680*1050":
	  document.body.background = "bg1680-1050.jpg";
	  break;
 case "1900*1200":
	  document.body.background = "bg1900-1200.jpg";
	  break;
 case "2560*1600":
	  document.body.background = "bg2560-1600.jpg";
	  break;
}
</script>

Seulement manque de bol... on viens de me rapporter que sur un ordi, le fond ne s'affiche pas. La tuile !!!

J'en conclue que ce script est totalement instable...

Y aurait il donc une bonne ici qui puisse m'aider ?

Je vous remercie grandement par avance.

A très vite

[Mephisto]

résolution sur le poste où ça ne fonctionne pas ?

sans doute en manque-t-il à ta liste, d'autant plus que tu n'as pas mi de "fond par défaut" (condition par defaut du switch)

[FrenchyNeo]

Malheureusement je ne m'y connais pas assez (donc pas du tout ) pour adapter ce script trouvé sur la toile à mon besoin (si ce script est bien sûr, bien écrit.... ).

La résolution où le poste n'a pas "trouvé" le fond est pourtant de 1024*768

Merci de ton (votre ?) aide.

[Shtong]

Il faudrait que tu regardes déjà s'il n'y a pas une erreur javascript dans le navigateur sur lequel ça ne fonctionne pas. S'il n'y en a pas, tu peux utiliser cette version modifiée, ce qui va afficher la résolution donnée par le navigateur, comme ça tu pourras voir la taille réelle dont tu as besoin :

<script type="text/javascript">
var resolution = screen.width + "*" + screen.height;
switch(resolution)
{
 case "800*600":
	  document.body.background = "bg800-600.jpg";
	  break;
 case "1024*768":
	  document.body.background = "bg1024-768.jpg";
	  break;
 case "1152*864":
	  document.body.background = "bg1152-864.jpg";
	  break;
 case "1280*720":
	  document.body.background = "bg1280-720.jpg";
	  break;
 case "1280*768":
	  document.body.background = "bg1280-768.jpg";
	  break;
 case "1280*800":
	  document.body.background = "bg1280-800.jpg";
	  break;
 case "1280*960":
	  document.body.background = "bg1280-960.jpg";
	  break;
 case "1280*1024":
	  document.body.background = "bg1280-1024.jpg";
	  break;
 case "1360*768":
	  document.body.background = "bg1360-768.jpg";
	  break;
 case "1600*900":
	  document.body.background = "bg1600-900.jpg";
	  break;
 case "1600*1024":
	  document.body.background = "bg1600-1024.jpg";
	  break;
 case "1680*1050":
	  document.body.background = "bg1680-1050.jpg";
	  break;
 case "1900*1200":
	  document.body.background = "bg1900-1200.jpg";
	  break;
 case "2560*1600":
	  document.body.background = "bg2560-1600.jpg";
	  break;
 default:
	  alert(resolution);
	  break;
}
</script>

En fait ça affiche la résolution si la résolution n'est pas trouvée.

[Mephisto]

mouai, le alert, c'est du debug

de toute façon, il faut gérer un cas par défaut pour les résolution batardes

garde le defaut comme ci-dessus, et colle un document.body.background (avec le fond que tu veux par défaut)

sinon, pour simplifier les choses:

document.body.background = "img_resize.php?sizex="+screen.width+"&sizey="+screen.height;

tu crées un fichier img_resize.php

<?
$background="bg-2560-1600.jpg";
$sx = isset($_REQUEST['sizex']) ? $_REQUEST['sizex'] : 150;
$sy = isset($_REQUEST['sizey']) ? $_REQUEST['sizey'] : 150;
passthru("cat $background | jpegresize $sx $sy");
?>

le script récupère donc les dimensions, et retaille l'image à celles demandés (avec jpegresize, check ton inbox, je t'ai MP les détails/code).

[BreizFenrir]

Au pire tu t'arranges pour que dans le cas où tu tombes sur une résolution exotique, le site reste utilisable mais juste un peu moins beau. Parce que dans ta liste il manque le 800x480 par exemple (eeePC 7xx), ainsi que les résolution utilisées par les terminaux mobiles.

Sinon la solution proposée par Mephisto est bien mieux, et serait encore meilleure avec la gestion d'un cache pour éviter d'appeler jpegresize (ou équivalent, par exemple la librairie PHP GD) à chaque requête.

[Shtong]

Ah oui c'est une solution temporaire pour qu'il voie la résolution du poste qui l'interesse, la proposition de Mephisto est bien mieux sur le long terme

[RaphAstronome]

Mephisto >

Fais attention à la surcharge du serveur !

Redimensionner a la volée est très lourd.

Sinon en JS tu peux faire quelque chose du style :

if (screen.width<=800 && screen.height<=600) {
	  document.body.background = "bg800-600.jpg";
} else if (screen.width<=1024 && screen.height<=768) {
	  document.body.background = "bg1024-768.jpg";
} else if  (screen.width<=1280 && screen.height<=720) {
[...]
} else {
	  document.body.background = "bg2560-1600.jpg"; // Le plus grand possible
}

Tu peux peut être aussi jouer sur le CSS depuis javascript pour redimensionner.

[Sentinel]

Ah c'est toi qui as développé le site de Ségolène ?

[jessicatte]

Ah c'est toi qui as développé le site de Ségolène ?

*

bonjour méssieurs, j'annonce une dépréssion vive dans ces prochainnes heures, je marrache les cheveux!

jai essayer et j'ai meme mis un code d'alerte mais rien ne s'affiche dans mon header,

alors je commence a me demander si je place bien le code au bon endroit..Par désespoir je vous met le code de l'index.php de mon template(c'est dans cuila que je met le code ).Juskici jai mis direct le code javascript entre <div id="headerbar"> et </div> .A priori je pense que c'est ici que ca se passe puisque si je met simplement un <img src="repertoire/image.gif"> jai bien l'image qui apparait dans mon header..

Si quelqu'un veut bien se pencher sur mon pb de fille ce serait simpa.

<?php

/**

* @package yoo_symphony Template

* @version 1.5.2 2009-11-05 11:26:17

* @author YOOtheme http://www.yootheme.com

* @copyright Copyright © 2007 - 2009 YOOtheme GmbH

*/

// no direct access

defined('_JEXEC') or die('Restricted access');

JHTML::_('behavior.mootools');

// include config

include_once(dirname(__FILE__).'/config.php');

?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>

<jdoc:include type="head" />

<link rel="apple-touch-icon" href="<?php echo $template->url ?>/apple_touch_icon.png" />

</head>

<body id="page" class="yoopage <?php echo $this->params->get('columns'); ?> <?php echo $this->params->get('itemcolor'); ?> <?php echo $this->params->get('toolscolor'); ?>">

<?php if($this->countModules('absolute')) : ?>

<div id="absolute">

<jdoc:include type="yoomodules" name="absolute" />

</div>

<?php endif; ?>

<div id="page-header">

<div class="page-header-1">

<div class="page-header-2">

<div class="page-header-3">

<div class="wrapper">

<div id="header">

<div id="toolbar">

<?php if($this->params->get('date')) : ?>

<div id="date">

<?php echo JHTML::_('date', 'now', JText::_('DATE_FORMAT_LC')) ?>

</div>

<?php endif; ?>

<?php if($this->countModules('toolbarleft')) : ?>

<div class="left">

<jdoc:include type="yoomodules" name="toolbarleft" style="yoo" />

</div>

<?php endif; ?>

<?php if($this->countModules('toolbarright')) : ?>

<div class="right">

<jdoc:include type="yoomodules" name="toolbarright" style="yoo" />

</div>

<?php endif; ?>

</div>

<div id="headerbar">

<script type="text/javascript">

var resolution = screen.width + "*" + screen.height;

switch(resolution)

{

case "800*600":

document.body.background = "bg800-600.jpg";

break;

case "1024*768":

document.body.background = "bg1024-768.jpg";

break;

case "1152*864":

document.body.background = "bg1152-864.jpg";

break;

case "1280*720":

document.body.background = "bg1280-720.jpg";

break;

case "1280*768":

document.body.background = "bg1280-768.jpg";

break;

case "1280*800":

document.body.background = "bg1280-800.jpg";

break;

case "1280*960":

document.body.background = "bg1280-960.jpg";

break;

case "1280*1024":

document.body.background = "bg1280-1024.jpg";

break;

case "1360*768":

document.body.background = "bg1360-768.jpg";

break;

case "1600*900":

document.body.background = "bg1600-900.jpg";

break;

case "1600*1024":

document.body.background = "bg1600-1024.jpg";

break;

case "1680*1050":

document.body.background = "bg1680-1050.jpg";

break;

case "1900*1200":

document.body.background = "bg1900-1200.jpg";

break;

case "1920*1080":

document.body.background = "url(templates/images/fleche.png)";

break;

case "2560*1600":

document.body.background = "bg2560-1600.jpg";

break;

default:

alert(resolution);

break;

}

</script>

</div>

Jessica

[Sentinel]

Je pense que ceci t'intéressera : http://css-tricks.com/perfect-full-page-background-image/

[piwi82]

Déjà au lieu d'utiliser :

document.body.background = "bg800-600.jpg";

Essaye de faire ça avec :

document.body.style.backgroundImage = "url('bg800-600.jpg')";

Et si aucune résolution ne correspond tu peux toujours créer l'image dynamiquement avec un script PHP (librairie gd2).

Ou mieux, enregistre les résolutions d'écran de tes utilisateurs, ça te permettra de savoir quelles résolutions il te manquent.