Mettere un'immagine di sfondo su un sito web è un affare di cinque minuti. Viene dedicato molto più tempo alla preparazione dell'immagine: selezione, regolazione, aggiunta di effetti, composizione di diverse illustrazioni in un unico file grafico.
Istruzioni
Passo 1
L'attributo background è responsabile della gestione dello sfondo. Per riempire uniformemente la pagina con un singolo colore, usa il tag style in body:. Lo sfondo sarà nero. Se usi i CSS, metti in testa: body {background-color: # 000000;}
Passo 2
Con l'aiuto di un collegamento, viene impostata un'immagine ripetuta. L'indirizzo è specificato come collegamento esterno o interno. Quando si utilizza questo metodo, è importante che le giunture tra le immagini rimangano invisibili, altrimenti la pagina sembrerà sciatta. In CSS, usa: body {background-color: # 000000; background-image: url (images / pattern.png);}.
Passaggio 3
La ripetizione del pattern può essere controllata. Background-repeat è responsabile di questa funzione insieme ai seguenti elementi: - ripeti-x - ripetizione orizzontale; - ripeti-y - ripetizione verticale: - ripeti - ripetizione in entrambe le direzioni; - no-repeat - senza ripetizione. È impostato come questo: body {colore di sfondo: # 000000; immagine di sfondo: url ("butterfly.gif"); background-repeat: no-repeat; }
Passaggio 4
La posizione dello sfondo aiuta a posizionare l'immagine nella parte desiderata della pagina web. Le coordinate possono essere impostate utilizzando percentuale (50% 75%), centimetri (5 cm 5 cm), aspetto pixel (200 px 400 px), forma parola (sinistra, destra, in alto, al centro, in basso). Ad esempio: body {colore-sfondo: # 000000; immagine di sfondo: url ("butterfly.gif"); background-repeat: no-repeat; attaccamento allo sfondo: fisso; posizione di sfondo: in basso a sinistra; } Il valore 0% 0% è uguale in alto a sinistra.
Passaggio 5
La proprietà background-attachment specifica se le immagini vengono fatte scorrere insieme alla pagina (background-attachment: scroll) o meno (background-attachment: fixed).
