CSS e dimensioni diverse del monitor?

Sto facendo un sito web (WIP). Ho incontrato alcuni problemi CSS, spero che voi ragazzi potete aiutarmi.CSS e dimensioni diverse del monitor?

La mia situazione attuale:

immagine am Ho, lascia chiamato "bg.png" con la larghezza su 2500px, e al centro dell'immagine di sfondo ha il mio logo.
Il mio sito web deve indirizzare tutte le dimensioni (da piccoli 800 x 600 a 2400 x XXX) utenti.

I miei problemi:

Come faccio a centralizzare l'immagine di sfondo (bg.png), in modo che il logo sempre posizionato nella centrato (in orizzontale) di diversa dimensione dello schermo monitor?

fonte

2010-06-11 studdler

Dato che sei un nuovo utente, assicurati di fare clic sul segno di spunta "Accetta" se una risposta soddisfa le tue esigenze. –

Domanda ben dichiarata a proposito (situazione attuale -> problema/comportamento desiderato). –

Dovresti sapere che alcune schermate sono più grandi di 2500. E che puoi espandere qualcosa anche su più schermi. Quindi 2500 non è un limite abbastanza grande. – Arkh

body { background: url('bg.png') 50% 50% no-repeat; }

Questo metterà l'immagine in full-size al centro della pagina, e l'utente vedrà come gran parte di questa immagine di sfondo come loro permessi finestra del browser.

fonte

2010-06-11 07:31:13

grazie, funziona. Ma ho bisogno di aspettare altri 9 minuti per accettare una risposta. Grazie Graphain – studdler

Studente esperto, felice di aiutare. Vale la pena registrarsi per poter tenere traccia delle domande e delle risposte nel tempo e incoraggiare gli altri ad aiutarti. –

Notato con grazie :) – studdler

Se fosse solo un file del logo è possibile utilizzare

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style>

fonte

2010-06-11 07:34:48

Ciò non centrerà esattamente l'immagine. La parte sinistra dell'immagine è centrata, ma il centro dell'immagine non è centrato. – strager

Per fare ciò, aggiungi margine-sinistra: -50%, margine superiore: -50%. – Sjoerd

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
}

Probabilmente non funzionano su Internet Explorer, ma è possibile utilizzare un piccolo hack con la posizione: assoluta, come sopra

fonte

2010-06-11 08:23:44 user170609

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
}

Questa soluzione è necessaria quando metti l'elemento img su un'altra scatola. Ma attenzione, potrebbe cambiare le dimensioni della scatola dei genitori.

fonte

2010-06-11 08:26:55 user170609

CSS e dimensioni diverse del monitor?

risposta

Problemi correlati