La progettazione del tuo sito: Sfondi CSS

Tweet

Il design di un sito web è altrettanto (se non di più) importante della sua funzionalità e usabilità. E 'fondamentale per un sito web di successo di essere forte visivamente così come foundationally.

Facciamo un breve momento di discutere la Cappella Sistina per illustrare il mio punto. La stessa cappella è stata costruita per durare ed è foundationally suono. Tuttavia, la Cappella non è famosa solo per la sua funzionalità. Pittura famigerato Michelangelo si basa sul soffitto della cappella e lascia la maggior parte in soggezione di bellezze artistiche. Il risultato di questa combinazione è semplicemente uno dei più grandi cappelle del mondo.

Siti web può esistere affidamento sia sulla presenza di grande disegno o del codice fantastico, ma in modo per i siti web di prosperare è essenziale combinare le due cose.

In questo post, mi piacerebbe dare un'occhiata alla parte importante del progetto e l'equazione di codifica con i CSS, più specificare la proprietà background CSS.

W3Schools definisce la proprietà CSS, come Background: Si noti che la maggior parte i valori trovati all'interno della proprietà Background può essere utilizzato come una loro proprietà "una proprietà scorciatoia per settare tutte le proprietà di sfondo in una dichiarazione.». Gli esempi che seguono sarà solo utilizzando la versione abbreviata della proprietà Background. Uno svantaggio di usare solo stenografia è che non è grande per il debug o scoprire errori di ortografia

Cominciamo analizzando il valore più elementare, quello che dovrebbe essere il primo su ogni proprietà background: Color.

body {
background: #000000;
}

Utilizzando semplici Valore del colore , uno sfondo può essere molto chiaro e semplice. Questa semplicità può essere vantaggioso per molti siti web. Tenete a mente che la tecnica eccellente design non significa necessariamente che le immagini sgargianti e Web 2.0 smussi ovunque. Oltre ai colori utilizzati nella proprietà background, è anche possibile utilizzare il valore della trasparenza. Il valore trasparente è utilizzato principalmente su sfondi all'interno del sito come ad esempio all'interno di div e tabelle e non comunemente su uno sfondo corpo come si trova qui.

Il valore del colore deve essere sempre un punto di ancoraggio all'interno della vostra proprietà background. Anche se si dispone di un'immagine in background che si estende su 1000 pixel +, si sta ancora andando a voler mettere un valore di colore dietro di esso in modo che, mentre l'immagine di sfondo sta caricando l'utente non vede uno sfondo bianco Stark sul tuo bel scuro sito .

Quindi, consente di discutere un altro importante valore di fondo, soprattutto nel mondo web di oggi, il background-image.

body {
background: #000000 url(images/yourimage.jpg) repeat fixed top;
}

Le immagini possono essere utilizzati in una varietà di modi differenti, e in combinazione con valori come background-attachment, background-position, e background-repeat. Non c'è fine a ciò che puoi fare per il vostro sfondo del corpo. Mentre è possibile inserire un'immagine in CSS senza l'aggiunta di questi altri valori, è essenziale che i quattro valori di restare insieme.

Gli esempi sopra e sotto mostrano solo alcuni modi è possibile utilizzare il background-image valore con l'aiuto del valore di background-repeat. Semplici sfondi fantasia con il background-repeat valore impostato per ripetere sono illustrati in precedenza. Versioni più complesse del valore in corso di ripetere-x può essere visto sotto. Immagini centrati può essere ottenuto impostando il valore a no-repeat come il bel sito buio , il background-repeat e background-image supportata dal background-position e background-attachment aiuti a mettere in luce i valori tuo stile siti.