Il design del tuo sito: Sfondi CSS

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

Prendiamo un breve momento di discutere la Cappella Sistina per illustrare il mio punto. La cappella è stata costruita per durare ed è foundationally suono. Tuttavia, la Cappella è famosa per il solo fatto della sua funzionalità. Pittura famigerato Michelangelo si basa sul soffitto della cappella e le foglie più in soggezione di bellezze artistiche. Il risultato di questa combinazione è semplicemente una delle cappelle più grandi del mondo.

Siti web può esistere basandosi su entrambi la presenza del grande disegno o codice fantastica, ma in modo per i siti web di prosperare è essenziale per combinare le due cose.

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

W3Schools definisce la proprietà CSS background come: "una proprietà stenografica per impostare tutte le proprietà di sfondo in una dichiarazione." Notare che i valori più trovato all'interno della proprietà di fondo può essere utilizzato come loro proprietà. Gli esempi che seguono sarà solo utilizzando la versione abbreviata della proprietà background. Uno svantaggio di utilizzare solo stenografia è che non è grande per il debug o per scoprire gli errori di ortografia

Cominciamo a guardare il valore di base, quella che dovrebbe essere il primo su ogni proprietà background: Color.

body {
background: #000000;
}

Utilizzando semplici Valore del colore, un contesto può essere molto chiaro e semplice. Questa semplicità può essere vantaggioso per molti siti web. Tenere presente che la tecnica eccellente design non significa necessariamente che le immagini appariscente e Web 2.0 smussi ovunque. In aggiunta ai colori utilizzati per la proprietà background, è possibile utilizzare anche il valore della trasparenza. Il valore trasparente è utilizzato principalmente su sfondi all'interno del sito, come div dentro e tabelle e non comunemente su uno sfondo del 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 nel tuo background che si estende su 1000 + pixel, siete ancora in corso a voler mettere un valore di colore dietro in modo che, mentre l'immagine di sfondo viene caricata l'utente non vede uno sfondo bianco Stark sul tuo buio Nizza sito web.

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

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

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

Gli esempi sopra e al di sotto mostrano solo alcuni modi è possibile utilizzare il valore di background-immagine con l'aiuto del valore di background-repeat. Sfondi semplice fantasia con il background-repeat valore impostato per ripetere sono illustrati in precedenza. Versioni più complesse del valore di essere impostato per ripetere-x si può vedere qui sotto. Centrato immagini può essere ottenuto impostando il valore di no-repeat come il bel sito buio, il background-repeat background-image e sostenuto dal background-position e background-aiuto per mettere in evidenza i valori attaccamento tuoi siti stile.