Codice HTML per l'immissione un'immagine di sfondo in un centro fisso

August 7

Codice HTML per l'immissione un'immagine di sfondo in un centro fisso


Uno sfondo che corrisponde e si fonde perfettamente con il layout e il contenuto è la chiave per fare un sito web dall'aspetto professionale. Per raggiungere questo obiettivo, il corretto posizionamento può essere necessario. L'attributo sfondo corpo HTML è deprecato in modo da utilizzare i fogli di stile invece per formattare le immagini di sfondo. Con gli stili CSS, si è in pieno controllo del modo in cui le immagini appaiono e si comportano sulle tue pagine web.

Posizionamento

Un documento HTML può avere un'immagine di sfondo per l'intera pagina e per elementi specifici della pagina, ad esempio un tavolo. stili CSS possono formattare queste immagini di sfondo in vari modi. Stili descrivono effetti e attributi quali il nome del file di origine per l'immagine, la frequenza con cui l'immagine viene ripetuto sulla pagina e la posizione dell'immagine sul documento.

Sintassi

Per impostare la posizione e l'allineamento di un'immagine di sfondo, è necessario utilizzare diverse proprietà dello sfondo CSS, ciascuna delle quali controlla un attributo specifico. È necessario utilizzare l'elemento che l'immagine viene utilizzata per come selettore nel foglio di stile. Ad esempio, se il fondo si desidera allineare è l'immagine di sfondo principale, utilizzare "corpo" come selettore, in quanto corrisponde al tag <body> in HTML.

La struttura è uguale a tutti sintassi CSS:

selettore {proprietà: valore;}

dove "selettore" è l'elemento HTML, "proprietà" è l'attributo o l'effetto e "valore" è l'informazione per tale attributo.

Proprietà

Ogni proprietà CSS sfondo ha una sua specifica funzione. La proprietà background-image viene utilizzato per richiamare il file di immagine specifica. La proprietà background-repeat determina il numero di volte che si ripete nella pagina. Per decidere se l'immagine "galleggia" sulla pagina o "bastoni" ad esso, come l'utente scorre la pagina, utilizza background-attachment. Per impostare l'allineamento delle immagini, utilizzare la proprietà background-position. Si noti che background-position può essere marcato in formato testo come "centro", "in alto a sinistra," ecc .; in percentuale; come unità; o come "Inherit" - il che significa che userà la stessa posizione come un altro elemento HTML che lo contiene. Per impostare un'immagine al centro di una pagina, è possibile utilizzare "Centro", "centro" o "50% 50%".

Esempi

Una immagine di sfondo è formattato con gli stili CSS che sono incorporati tra i tag <head> in un documento HTML. Se marcato in un foglio di stile esterno, rimuovere il codice che ha le frecce.

In questo esempio, l'immagine di sfondo è posto al centro della pagina. Si è impostato su "no repeat", così l'immagine appare solo una volta, non piastrellato come un modello. Lo sfondo è "fisso" - se si sposta verso l'alto o verso il basso o lateralmente sulla pagina, che rimarrà nella stessa posizione sullo schermo, come se galleggiante. Ad esempio, se c'è del testo nella pagina, il testo si sposta ma lo sfondo non lo farà. Se si desidera che l'immagine di muoversi con il resto della pagina, invece, immettere "scorrere" al posto di "fisso" per background-attachment.

<Head> <style type = "text / css">

corpo

{

background-image: URL ( 'company.gif');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}

</ Style> </ head>