Centrare immagine homepage

Centrare immagine homepage postato il 15/03/2012 13:17:48 nel forum programmazione, gdrcd, open source, 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??

Entropia Universe ↗
Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

quota

Pagine → 1

itsuki95

SCRIVI

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

Sponsorizzati con noi! ↗
Sponsorizza il tuo gioco su GDR-online! Trova nuovi giocatori fra i migliaia di appassionati che ogni giorno visitano il portale!

quota

leoblacksoul

SCRIVI

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

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu ↗ - Hosting per GDR

quota

nicks

SCRIVI

15/03/2012 13:39:32

devi andare in homepage.css

/** * Struttura contenitore di tutto il sito
*/
div#main{
height:100%;
width:100%;
background:url("imgs/bg_header.jpg") repeat-x top left;
text-align:center;
}

/** * Larghezza della struttura del sito
*/
div#site_width{
margin:0 auto;
width:960px;
text-align:left;
}

E lavorare su questi. Metti le dimensioni in percentuale per i margin, ed inserisci un valore statico per il Width

Lineage II ↗
Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

quota

dany

SCRIVI

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ò:

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.

"Punta sempre alla luna, male che vada avrai vagabondato tra le stelle."

quota

henry97

SCRIVI

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.

.: Operation Desert Sunrise GDR © :.
Segui gli sviluppi su Facebook!

quota

leoblacksoul

SCRIVI

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.

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu ↗ - Hosting per GDR

quota

vino_veritas

SCRIVI

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.