[HTML] Sfondo

[negator136]

come faccio a fare in modo che l'immagine di sfondo di una pagina web si adatti perfettamente alla finestra del browser a qualsiasi risoluzione?

vorrei evitare che la stessa immagine si ripeta affiancandosi.

il problema si pone solo in larghezza, visto che in verticale lo sfondo si può fissare in modo che non "scrolli" insieme a tutta la pagina.

grazie

[pinok]

devi mettere l'immagine nello sfondo utilizzando un foglio di stile che definisca il background per il body

<STYLE type="text/css">
BODY {background-image: url("marble.png"); background-repeat: no-repeat;}
</STYLE>
Volendo nelle graffe puoi anche specificare background-position, ad es:

background-position: center;


Vedi http://www.w3.org/TR/CSS21/colors.html

[negator136]

grazie, però ci avevo già provato.

probabilmente non mi sono spiegato bene.

io vorrei che l'immagine di sfondo, oltre a non ripetersi, si allarghi e si restringa a seconda della larghezza del browser. sia verticalmente (problema già risolto), sia ORIZZONTALMENTE.

Originariamente inviato da negator136

grazie, però ci avevo già provato.

probabilmente non mi sono spiegato bene.

io vorrei che l'immagine di sfondo, oltre a non ripetersi, si allarghi e si restringa a seconda della larghezza del browser. sia verticalmente (problema già risolto), sia ORIZZONTALMENTE.

scusa ma non ho capito come hai fatto a rendere ridimensionabile dinamicamente l'immagine di sfondo?

Cmq per non ripetere l'immagine di sfondo ti basta indicare nel CSS:


background-repeat:no-repeat;

[negator136]

Originariamente inviato da Sgurbat

scusa ma non ho capito come hai fatto a rendere ridimensionabile dinamicamente l'immagine di sfondo?

Cmq per non ripetere l'immagine di sfondo ti basta indicare nel CSS:


background-repeat:no-repeat;

in effetti verticalmente non ci sono riuscito... però, se l'immagine è abbastanza lunga, anche ad alte risoluzioni non ha bisogno di ripetersi.

orizzontalmente è diverso, perchè, se l'immagine è troppo larga, a basse risoluzioni compare solo per metà, mentre, se è troppo stretta, ad alte risoluzioni si affianca o lascia una colonna bianca (con no-repeat).

[ri]

è semplice, non si può fare

l'unica soluzione è usare un "trucchetto", ovvero mettere l'immagine dentro un <div> che conterrà l'immagine (non come sfondo, ma proprio come tag <img>) e poi costruire tutto il resto del sito in modo che stia sopra a questo div

ma è una soluzione che porta a svariati casini e che quindi ti sconsiglio

[negator136]

Originariamente inviato da ri

è semplice, non si può fare

l'unica soluzione è usare un "trucchetto", ovvero mettere l'immagine dentro un <div> che conterrà l'immagine (non come sfondo, ma proprio come tag <img>) e poi costruire tutto il resto del sito in modo che stia sopra a questo div

ma è una soluzione che porta a svariati casini e che quindi ti sconsiglio

lo temevo


grazie comunque, anche per il trucchetto che non penso di usare

[pinok]

Non si può fare con le buone, ma scendendo a compromessi.....
Ad es. (ma dovresti provare) potresti mettere uno script che si attiva "onLoad" e che recuperi la dimensione interna del browser, per poi impostare correttamente l'immagine di sfondo.

Il problema ce l'avresti sul ridimensionamento della finestra dopo il caricamento, ma potrebbe essere che esista qualche evento del tipo onResize.

[negator136]

Originariamente inviato da pinok

Non si può fare con le buone, ma scendendo a compromessi.....
Ad es. (ma dovresti provare) potresti mettere uno script che si attiva "onLoad" e che recuperi la dimensione interna del browser, per poi impostare correttamente l'immagine di sfondo.

Il problema ce l'avresti sul ridimensionamento della finestra dopo il caricamento, ma potrebbe essere che esista qualche evento del tipo onResize.

capito... lascio perdere.

troppo difficile per me che mastico bene solo htlm. cioè, ho capito quello che dici, ma non saprei proprio da che parte cominciare per metterlo in pratica. in ogni caso credo che appesantirebbe abbastanza le mie pagine.

grazie comunque