La possibilità di estendere l'immagine di sfondo all'intera larghezza della finestra del browser utilizzando CSS è apparsa solo con il rilascio della sua ultima specifica: CSS3. Sfortunatamente, finora un gran numero di navigatori web utilizza i primi browser che non comprendono le specifiche CSS3. Pertanto, devi fare una scelta: utilizzare una soluzione meno conveniente, ma cross-browser, o un'alta tecnologia, ma per un pubblico limitato. Consideriamo entrambe le opzioni.
Necessario
Conoscenza base di HTML e CSS
Istruzioni
Passo 1
La prima opzione si basa su specifiche precedenti del linguaggio CSS. È necessario creare una struttura di codice HTML che abbia due livelli sovrapposti, uno sopra l'altro. I livelli (div) possono essere estesi alla larghezza dello schermo nella vecchia specifica del linguaggio di descrizione dello stile a cascata. Nella parte inferiore dei livelli è necessario posizionare l'immagine di sfondo e in quella superiore verrà posizionato tutto il contenuto della pagina. Una tale struttura nel corpo del documento potrebbe assomigliare a questa:
Questo sarà il contenuto della pagina
E la descrizione degli stili per questa struttura dovrebbe essere inserita nella parte dell'intestazione. Ad esempio, questo:
html, corpo {
margine: 0px;
altezza: 100%;
}
#sfondo {
posizione: assoluta;
larghezza: 100%;
altezza: 100%;
}
#corpo {
posizione: assoluta;
larghezza: 100%;
altezza: 100%;
indice z: 2;
}
Qui i livelli con ID di sfondo (questa è la tua immagine di sfondo) e il corpo (questo è il livello per il contenuto della pagina) sono impostati su posizionamento assoluto e larghezza e altezza del 100%. Inoltre, al livello del contenuto viene assegnato un numero di serie z-index = 2. Determina la "profondità" dei livelli: più è grande, più lontano dal "basso" si trova questo livello. Nel nostro caso, sarà sopra il livello di sfondo, che utilizza lo z-index predefinito.
Passo 2
Il codice completo potrebbe essere simile a questo:
html, corpo {
margine: 0px;
altezza: 100%;
}
#sfondo {
posizione: assoluta;
larghezza: 100%;
altezza: 100%;
}
#corpo {
posizione: assoluta;
larghezza: 100%;
altezza: 100%;
indice z: 2;
}
Questo sarà il contenuto della pagina
Non dimenticare di sostituire il nome del file dell'immagine di sfondo fon.png.
Passaggio 3
La seconda opzione utilizzerà la proprietà background-size introdotta nei CSS3. Allo stesso tempo, aggiungi proprietà simili alle definizioni di stile precedentemente utilizzate dai browser Mozilla Firefox, Google Chrome e Opera. Il blocco della descrizione dello stile in questa versione potrebbe assomigliare a questo:
html {
sfondo: url (fon.png) centro senza ripetizione centro fisso;
-dimensione-sfondo-webkit: copertina;
-moz-background-size: copertina;
-o-dimensione dello sfondo: copertina;
dimensione dello sfondo: copertina;
}
E qui non dimenticare di sostituire il nome del file dell'immagine di sfondo fon.png. E nel corpo del documento stesso, in questa versione non sono richieste costruzioni speciali.
