Centrare immagine homepage

Centrare immagine homepage postato il 15/03/2012 13:17:48 nel forum programmazione, open source e hosting

salve a tutti, non riesco a capire come fare per inserire un'immagine di sfondo all'homepage e quindi centrare il tutto in modo che qualunque sia la risoluzione della schermo i player si ritroveranno sempre l'home al centro dello schermo, qualcuno può aiutarmi??

15/03/2012 13:30:09

owli1 ha scritto: Dipende come ce lo vuoi mettere.
Come sfondo a tutta la finestra?
Come un'immagine al centro della finestra?
Con CSS?

Io saprei farlo con le tabelle HTML per dire,ma non penso sia la soluzione migliore xD

Io vorrei metterlo come sfondo a tutta l'homepage, così che poi esca tutto, sfondo, schermata per il log ecc ecc al centro della pagina qualunque sia la risoluzione dello schermo, solo che non so dove inserire il codice

15/03/2012 13:35:50

Non mettere lo sfondo al body. Il body ha un comportamento particolare perchè è costretto a seguire i comportamenti della finestra del browser.
Metti un div immediatamente dentro al body, in modo che contenga tutta la pagina. Poi metti lo sfondo a questo div e preoccupati di centrarlo (dipende da che tipo di layout vuoi fare). Poi preoccupati di centrare i contenuti. Non usare posizionamenti assoluti, sono il modo migliore per fallire a fare un layout che si veda bene a tutte le risoluzioni

15/03/2012 15:27:20 e modificato da dany il 15/03/2012 15:35:02

Mettere un div al centro di una pagina, indipendentemente da quale che sia la risoluzione è molto facile con un CSS e poi metterci dentro qualsiasi immagine o testo tu voglia.

Basta che inserisci nel tuo foglio di stile il seguente codice:

width:altezza div;
height:larghezza div;
position:absolute;
top:50%;
left:50%;
margin-left:-larghezza/2;
margin-top:-altezza/2;

Ti faccio un esempio pratico: mettiamo che io voglia avere al centro della pagina un div delle dimensioni di 300 x 500.
Nella pagina scriverò:

<div class="divcentrato">....</div>

Nel CSS, invece, metterò:

.divcentrato {

width:300px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-250px;

}

In questa maniera il tuo bel riquadro si troverà perfettamente centrato, indipendentemente dalla risoluzione utilizzata.

14/05/2012 16:48:38

Chiedo qua perchè la domanda è più o meno la stessa.
Stavo provando a modificare lo sfondo (lo vorrei a grandezza pagina web) della homepage ma non riesco a dare all'immagine le dimensioni della pagina, senza dover spostarmi di lato o in giù per visualizzarla tutta.
Ho capito il punto del codice che devo cambiare ma non so come a questo punto...
Ho provato a guardare sulle guide ma nn mi ritrovo.
Se potete aiutarmi vi ringrazio molto.

16/05/2012 02:42:42

Non c'è un modo per costringere un immagine a espandersi in larghezza e lunghezza esattamente alle dimensioni del viewport, non in HTML+CSS.
Se vuoi realizzarlo devi usare javascript. E devi anche usare immagini vettoriali, altrimenti su risoluzioni grandi l'immagine sgrana, e su risoluzioni piccole invece usi un immagine troppo pesante per le dimensioni a cui viene visualizzata.
è per questo che per fare layout fluidi non si usano le immagini, le immagini ti costringono a fissare le dimensioni. Infatti i grandi siti come facebook o google che si adattano alla grandezza della finestra del browser, usano pochissime immagini e quelle che hanno le usano solo per loghi o cose del genere, non certo per gli sfondi.

16/05/2012 11:40:21

Infatti, è sconsigliabile utilizzare grosse immagini come sfondo di div, oltre per i motivi elencati sopra di me, spesso stancano gli occhi degli utenti durante la navigazione.