Vediamo come inserire nel nostro sito un’immagine di background centrata e a pieno schermo, che si adatti alle dimensioni del browser, grazie alle librerie jQuery e il Css. Innanzitutto carichiamo la libreria all’interno del tag <head>:
Ora inseriamo le funzioni che operano sullo “stretch” proporzionando e centrando l’immagine, sempre all’interno dell’<head>:
Ora inseriamo le funzioni che controllano il caricamento del documento e il resize del browser:
Ora abbiamo assegnato un id all’ immagine da posizionare in seguito dentro al <div>. Scriviamo il Css:
Abbiamo posizionato il <div> di background nello z-index:1, dunque tutti i contenuti dovranno essere scritti in uno z-index:2 o superiore. Inoltre la posizione del background non scrollerà col resto dei contenuti, e l‘overflow: hidden elimina ogni possibile scrollbar.
Infine, inseriamo nel <body> il seguente html:
Image-name.jpg andrà sostituito con un’immagine a vostra scelta.
Ecco il codice completo:
Fullscreen background image with jqueryAlla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake