Come fare uno sfondo fisso in CSS

May 25

Come fare uno sfondo fisso in CSS


È possibile creare pagine Web con molte proprietà di stile. Utilizzando HTML e CSS (Cascading Style Sheets) è possibile specificare diverse regole di stile diversi che determinano come apparirà il contenuto della pagina Web. Tra le proprietà di stile è possibile dichiarare in CSS è sullo sfondo. È possibile impostare le proprietà di sfondo per gli elementi e per la pagina HTML per intero. Un fondo può anche contenere un'immagine che può essere ripetuto per riempire lo spazio disponibile ed eventualmente fissato in modo che non si sposti quando l'utente scorre la pagina.

istruzione

1 Crea la tua pagina web. Se non si dispone già di una pagina Web utilizzo costruita la seguente struttura campione che include un link ad un foglio di stile esterno:

<Html>

<Head>

<Link rel = "stylesheet" type = "text / css" href = "backstyle.css" />

</ Head>

<Body>

<Div> Ecco il contenuto della pagina </ div>

</ Body>

</ Html>

La pagina contiene un elemento singolo "div" puramente dimostrare. Se si vuole dare il vostro file CSS un nome diverso, modificare l'elemento di attributo "link" "href" per soddisfare il nome che si sceglie.

2 Preparare l'immagine di sfondo. Se si dispone già di un file di immagine che si desidera utilizzare nello sfondo della pagina Web, caricarlo sul server Web. Se il file di immagine è di grandi dimensioni si potrebbe desiderare di ottimizzarlo per ridurre la quantità di tempo necessario per il download sul Web quando la gente visualizzare la pagina. Se si sta scaricando un'immagine da utilizzare come sfondo della pagina o si crea utilizzando un programma di grafica anche questo è un passo opportuno. È possibile ridurre le dimensioni del file di un'immagine, scegliendo le impostazioni per la qualità dell'immagine quando si salva in un programma come Photoshop, Paint.NET o GIMP (GNU Image Manipulation Program).

3 Crea il tuo codice CSS con l'apertura di un nuovo file in un editor di testo, salvarlo con il nome "backstyle.css" o qualsiasi altro nome che preferite, ricordando l'attributo "href" nel codice HTML elemento "link" deve corrispondere a questo nome. Il valore della tua immagine scelta come sfondo il seguente codice:

body {background: # 000000 URL ( "immagini / bgpic.jpg");}

Questo codice presuppone il file di immagine sta per essere salvato in una directory chiamata "immagini" che viene memorizzato nella stessa directory come pagina Web stesso. Modificare il codice per soddisfare il nome e la posizione del file di immagine, se necessario. Il codice indica anche che qualsiasi zona non coperta dalla immagine di sfondo deve essere colorato di nero.

4 Modificare il vostro codice CSS per dettare se l'immagine di sfondo viene ripetuta o meno. Il codice seguente indica che l'immagine sarà ripetuta sull'asse "y", ma non sulla "X" assi:

background: # 000000 URL ( "images / bgpic.jpg") repeat-y;

Altri valori opzionali per sfondo ripetizione comprendono "repeat-x" per ripetere il "x" asse e "no-repeat" per visualizzare l'immagine una sola volta. Se non si inserisce un valore per la proprietà background di ripetizione, il valore predefinito è di per l'immagine venga ripetuta lungo entrambi gli assi.

5 Modificare il vostro codice CSS per fissare l'immagine di sfondo. Il codice esteso seguente imposta tutte le proprietà di fondo in un'unica dichiarazione, tra cui l'impostazione fissa:

background: # 000000 URL ( "images / bgpic.jpg") repeat-y fisso;

Aggiungendo la parola "fisso" specifica che quando la pagina viene fatta scorrere dall'utente l'immagine di sfondo non scorrerà con esso, ma rimane nella stessa posizione. Salvare i file, caricare sul server e passare a loro di testare il loro aspetto.

Consigli e avvertenze

  • L'immagine di sfondo efficace in grado di creare un look alla moda all'interno di una pagina senza la necessità di dettagliato lavoro di progettazione grafica.
  • Una immagine di sfondo ripetuta può sembrare confuso, a seconda l'immagine in questione.