Se tu sei progettare un sito web, potresti essere interessato a imparare come creare un'immagine di sfondo fissa o una filigrana su una pagina web. Questo è un trattamento di design comune che è stato popolare online per un po' di tempo. È un effetto utile da avere nella tua borsa di trucchi per il web design.
Se non l'hai mai fatto prima o l'hai provato in precedenza senza fortuna, il processo potrebbe sembrare intimidatorio, ma in realtà non è affatto molto difficile. Con questo breve tutorial, otterrai le informazioni necessarie per apprendere la tecnica in pochi minuti utilizzando i CSS.
Iniziare
Le immagini di sfondo o le filigrane (che in realtà sono solo immagini di sfondo molto chiare) hanno una storia nel design stampato. I documenti hanno a lungo incluso filigrane su di essi per impedire che vengano copiati. Inoltre, molti volantini e brochure utilizzano immagini di sfondo di grandi dimensioni come parte del design del pezzo stampato. Il web design ha a lungo preso in prestito stili dalla stampa e le immagini di sfondo sono uno di questi stili presi in prestito.
Queste grandi immagini di sfondo sono facili da creare utilizzando i tre seguenti Stile CSS proprietà:
- immagine di sfondo
- sfondo-ripetizione
- sfondo-attaccamento
- dimensione dello sfondo
Immagine di sfondo
Utilizzerai background-image per definire l'immagine che verrà utilizzata come filigrana. Questo stile usa semplicemente un percorso di file per caricare un'immagine che hai sul tuo sito, probabilmente in una directory chiamata immagini.
background-image: url(/images/page-background.jpg);
È importante che l'immagine stessa sia più chiara o più trasparente di un'immagine normale. Questo creerà che "filigrana" aspetto in cui un'immagine semitrasparente si trova dietro il testo, la grafica e altri elementi principali della pagina web. Senza questo passaggio, l'immagine di sfondo competerà con le informazioni sulla tua pagina e ne renderà difficile la lettura.
Puoi regolare l'immagine di sfondo in qualsiasi programma di editing come Adobe Photoshop.
Sfondo-Ripeti
La proprietà di ripetizione in background viene dopo. Se vuoi che la tua immagine sia una grande grafica in stile filigrana, dovresti usare questa proprietà per fare in modo che l'immagine venga visualizzata solo una volta.
background-repeat: no-repeat;
Senza il nessuna ripetizione proprietà, l'impostazione predefinita è che l'immagine si ripeta più e più volte sulla pagina. Questo è indesiderabile nella maggior parte dei design di pagine Web moderne, quindi questo stile dovrebbe essere considerato essenziale nel tuo CSS.
Sfondo-allegato Background
L'allegato in background è una proprietà di cui molti web designer dimenticano. Il suo utilizzo mantiene l'immagine di sfondo fissa quando si utilizza il fisso proprietà. È ciò che trasforma quell'immagine in una filigrana fissata sulla pagina.
Il valore predefinito per questa proprietà è scorrere. Se non specifichi un valore di allegato allo sfondo, lo sfondo scorrerà insieme al resto della pagina.
attaccamento allo sfondo: fisso;
Dimensione dello sfondo
Background-size è una proprietà CSS più recente. Ti consente di impostare la dimensione di uno sfondo in base alla finestra in cui viene visualizzato. Questo è molto utile per siti web reattivi che verrà visualizzato in diverse dimensioni su diversi dispositivi.
dimensione dello sfondo: copertina;
Due valori utili che puoi utilizzare per questa proprietà includono:
- Copertina – Ridimensiona lo sfondo in modo da visualizzare l'intera larghezza o l'intera altezza. Ciò significa che alcune parti dell'immagine potrebbero non apparire sullo schermo ma che l'intera area sarà coperta.
- Contenere – Ridimensiona l'immagine in modo che sia l'intera larghezza che l'altezza siano mostrate nell'area in cui viene applicato lo stile. L'immagine non viene tagliata, ma il lato negativo è che parti dell'area potrebbero non essere coperte dall'immagine.
Aggiungere il CSS alla tua pagina
Dopo aver compreso le proprietà di cui sopra e i loro valori, puoi aggiungere questi stili al tuo sito web.
Aggiungi quanto segue all'HEAD della tua pagina web se stai creando un sito a pagina singola. Aggiungilo agli stili CSS di un foglio di stile esterno se stai costruendo un sito multipagina e vuoi sfruttare la potenza di un foglio esterno.
Modifica l'URL della tua immagine di sfondo in modo che corrisponda al nome file e al percorso file specifici pertinenti al tuo sito. Apporta qualsiasi altra modifica appropriata per adattarla anche al tuo design e avrai una filigrana.
Puoi specificare anche la posizione
Se vuoi posizionare la filigrana in una posizione specifica sulla tua pagina web, puoi farlo anche tu. Ad esempio, potresti volere la filigrana al centro della pagina o forse nell'angolo inferiore, anziché nell'angolo superiore, che è l'impostazione predefinita.
Per fare ciò, aggiungi la proprietà background-position al tuo stile. Questo posizionerà l'immagine nel punto esatto in cui desideri che appaia. Puoi utilizzare valori in pixel, percentuali o allineamenti per ottenere quell'effetto di posizionamento.
posizione di sfondo: centro;