Come ottenere un'immagine di ripetere con i CSS come contenuto viene aggiunto

August 29

Come ottenere un'immagine di ripetere con i CSS come contenuto viene aggiunto


Quando si visualizza un'immagine come sfondo sul vostro sito web, l'immagine viene visualizzata solo una volta dietro il testo sulla pagina. Questo problema si verifica nonrepeat quando si inserisce la grafica con HTML; tuttavia, usando i CSS dà invece il controllo su come i duplicati di immagine. Utilizzare editor di testo del computer per inserire il codice CSS necessario per ottenere un'immagine di ripetere automaticamente quando si aggiungono i contenuti.

istruzione

1 Carica l'immagine di sfondo per il vostro ospite Web nella stessa cartella o directory in cui si trovano i file del sito web. Registrare l'indirizzo URL della tua foto - per esempio, "http://www.site.com/images/background.gif."

2 Avviare il software editor di testo e portare il documento sito web che ha l'immagine che si desidera ripetere.

3 Immettere il seguente codice CSS dopo l'inizio "<head>" tag:

<Style type = "text / css">

</ Style>

4 Tipo "{} body" tra gli elementi di stile per creare una regola che controlla l'aspetto generale della vostra pagina. Inserire "background-image: URL ( '');" all'interno delle parentesi graffe e digitare l'indirizzo URL del vostro grafico, come il seguente esempio:

body {background-image: URL ( 'http://www.site.com/images/background.gif'); }

5 Inserire "background-repeat:;" all'interno delle parentesi e di tipo "repeat" come valore. In alternativa, inserire "repeat-x", dopo l'attributo background-repeat per specificare che si desidera solo l'immagine di duplicare in orizzontale, o digitare "repeat-y" per istruzioni al fine di visualizzare solo in senso verticale. Illustrare:

body {background-repeat: repeat; }

6 Salvare il file e caricarlo di nuovo al vostro ospite. Il tuo CSS finito assomiglia a questo esempio:

<Style type = "text / css">

body {background-image: URL ( 'http://www.site.com/images/background.gif');

background-repeat: repeat;

}

</ Style>