resize immagine di sfondo

**lordalbert** · 28-08-2007, 01:28

Ciao. Io ho la necessità di usare come sfondo di una pagina web una immagine, che non deve essere ripetuta, ma rimanere fissa ed estesa sullo sfondo.
Il problema sono le dimensioni dell'immagine. Se uso una immagine di 1024x768 chi ha una risoluzione maggiore non vede l'immagine estesa a tutta la pagina, ma più piccola. Viceversa, chi ha una risoluzione minore vede l'immagine troppo grossa. Non esiste uno script java per regolare automaticamente le dimensioni dell'immagine di sfondo? In base alla grandezza dello schermo.

Ciao e grazie mille!

**mirkoagrati** · 28-08-2007, 09:21

Esistono script per capire che risoluzione adotta il client che si è collegato.

ma se usi le percentuali l'immagine dovrebbe essere automaticamente ridimensionata:

width="100%"
height="100%".

Con questo sistema però rischi che l'immagine si sgrani o viceversa si comprima troppo

Ciao

**lordalbert** · 28-08-2007, 14:48

si si, purtroppo lo so che c'è la possibilità che l'immagine sgrani....
Ma le percentuali dove dovrei metterle? dentro il <body>? (l'immagine è di sfondo)

**mirkoagrati** · 28-08-2007, 14:53

Dai un'occhiata qui: http://www.w3.org/TR/REC-CSS2/colors.html
c'è tutto quello che ti può servire per le proprietà dell'immagine di background di un body.

Ciao

**br1** · 28-08-2007, 15:07

Non e' possibile ridimensionare l'immagine di sfondo della pagina, al massimo puoi impostare una immagine diversa a seconda della risoluzione video adottata dall'utente... ma ovviamente e' un palliativo che non tiene conto delle effettive dimensioni e proporzioni della finestra del browser.

Sarebbero possibili arrangiamenti macchinosi e probabilmente poco crossbrowser, il miglior compromesso si ottiene con un uso oculato delle proprieta' CSS linkate al post precedente.

ciao

**pietro09** · 28-08-2007, 16:08

Ho un esempio fatto tempo fa per provare il ridimensionamento immagini lato server.
La cosa si può fare, ma non credo che lo userò mai perchè la cosa, dal mio punto di vista è abbastanza inutile.

metto:

<body onresize="return window_onresize()" style="margin:0;background-repeat:no-repeat" onload="return window_onload()">

e il metodo window_onresize() richiama l'immagine ridimensionata come:

document.body.style.backgroundImage = "url(http://localhost/ArchivioEsempi2/Cor...a1.gif&height=" + h + "&width=" + w + ")";

Nel mio caso ho messo un gif molto piccolo e l'ingrandimento e la deformazione sono più che accettabili, visto che l'immagine viene non sgranata, ma ingrandita mediante interpolazione bicubica di alta qualità e si vede in modo sfuocato ma piacevole.

Detto questo, ribadisco che lo considero un esercizio da non usare nella realtà.
L'ho provato con IE7, Firefox2 e Opera9.

**lordalbert** · 29-08-2007, 12:04

come mai sconsigli di usarlo?

**pietro09** · 29-08-2007, 12:22

Originariamente inviato da lordalbert
come mai sconsigli di usarlo?

Non ho sconsigliato l'uso. Ho detto che è stato fatto come esercizio di ridimensionamento immagini al volo. A me personalmente non piace, perchè in una pagina web cerco quello che manca: semplicità e contenuti.
Ma se ti piace, provalo; magari con php.

**pietro09** · 29-08-2007, 16:01

e va bene, ho fatto delle prove e, in fondo non mi sembra male. Riporto sotto il codice che ho usato.
L'istruzione window.setInterval(window_onresize, 5000); mi è necessaria per Opera che senza, ha dei tentennamenti

Per immagine ho usato un gif che rappresenta una moneta da un euro. Il server si deve occupare di ridimensionarla e di renderla semitrasparente tipo filigrana.

ps. il server si deve occupare anche di adattare l'immagine senza deformarla alle dimensioni della finestra.

codice:

<!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>
    <title>Pagina senza titolo</title>
    <link href="../../../stili/Styles.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--

function window_onresize() 
{
    var cs = ClientSize();
    var w = cs.width;
    var h = cs.height;
        
    document.body.style.backgroundImage = "url(http://localhost/ArchivioEsempi2/Cor...ro.gif&height=" + h  + "&width=" + w + ")";

}

function ClientSize() 
{
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) 
    {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } 
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
    {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
    {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return {width:myWidth, height:myHeight };
}
function window_onload() 
{
    window_onresize();
    window.setInterval(window_onresize, 5000);
}


// -->
</script>
    
</head>
<body onresize="return window_onresize();" style="background-repeat:no-repeat" onload="return window_onload()">
    <h1>PROVA IMMAGINE DI SOTTOFONDO ADATTATA</h1>
</body>
</html>

**br1** · 29-08-2007, 21:32

Originariamente inviato da pietro09

e va bene, ho fatto delle prove e, in fondo non mi sembra male. Riporto sotto il codice che ho usato.
L'istruzione window.setInterval(window_onresize, 5000); mi è necessaria per Opera che senza, ha dei tentennamenti

Per immagine ho usato un gif che rappresenta una moneta da un euro. Il server si deve occupare di ridimensionarla e di renderla semitrasparente tipo filigrana.

ps. il server si deve occupare anche di adattare l'immagine senza deformarla alle dimensioni della finestra.

Per dirla semplice: senza il server che ridimensiona l'immagine il javacript serve a nulla.

ciao

Discussione: resize immagine di sfondo

Strumenti discussione

Ricerca discussione

Visualizza

resize immagine di sfondo

Permessi di invio