Il linguaggio di markup HTML consente a un web designer di utilizzare qualsiasi immagine come immagine di sfondo. Tuttavia, la lingua stessa manca di controlli integrati per le immagini di sfondo. Un'ulteriore messa a punto viene eseguita utilizzando fogli di stile CSS a cascata.
Istruzioni
Passo 1
Per estendere lo sfondo all'intera larghezza del browser, devi utilizzare il parametro z-index nel tuo CSS. Ti permette di impostare l'ordine degli elementi che crei. Più alto è il valore di questo attributo, più alto sarà il blocco nella pagina.
Passo 2
Crea nuovi documenti in formato html e css (tasto destro del mouse - "Nuovo" - "File di testo") e aprili utilizzando un qualsiasi editor di testo.
Passaggio 3
Posiziona l'immagine di sfondo sul livello inferiore. Si allungherà a seconda della risoluzione dello schermo. Nella parte superiore, verrà posizionato un altro elemento su cui verrà visualizzato il contenuto della pagina. Per fare ciò, crea due blocchi. Nel file css scrivi:.1layer {z-index: 1; larghezza: 100% altezza: 100% posizione: assoluta;}. 2layer {Posizione: assoluta; z-index: 2; } Il parametro position: absolute permette di impostare il posizionamento assoluto, ovvero il livello verrà posizionato indipendentemente dagli altri elementi.
Passaggio 4
Includere il codice CSS generato nel file HTML utilizzando il tag di collegamento: Sfondo della pagina
Passaggio 5
Crea un nuovo livello. Usando il tag
metti una foto su di esso. Ad esempio: Contenuto della pagina Per img, viene specificato solo il parametro di larghezza, perché se si specifica anche l'altezza, in alcuni browser apparirà la distorsione dell'immagine.
Passaggio 6
Salva le tue modifiche. Per testare il tuo codice, ingrandisci la pagina nella finestra del tuo browser. Anche l'immagine di sfondo dovrebbe essere ingrandita.
