Come Float un'immagine di sfondo dietro al testo in HTML

July 13

Molti siti web fanno largo uso di immagini di sfondo per l'intero sito, ma ci sono alcuni casi in cui si può solo desiderare una singola immagine appaia sullo sfondo, e solo in una posizione unica. In questi casi, è utile sapere come fare questo singolo galleggiante immagine al posto giusto sulla pagina. Può essere particolarmente importante se si sta posizionando l'immagine dietro un altro elemento di pagina, come testo, e la necessità di fare in modo che le linee di tutto correttamente.

istruzione

1 Individuare il blocco di testo che si desidera a galleggiare un'immagine di sfondo dietro nel documento HTML.

2 Individuare il tag di apertura paragrafo del testo. Esso dovrebbe essere simile a questo: <p>.

3 Aggiungere il seguente codice al tag di apertura del paragrafo, in-tra la "p" e la parentesi di chiusura - di notare che i marchi in-tra parentesi sono due apostrofi singoli, non un paio di virgolette: style = "background-image : URL ( ''); background-repeat: no-repeat; background-position:; "

4 Aggiungere l'URL completo dell'immagine che si desidera posizionare dietro il testo in-tra gli apostrofi nella parentesi nel codice di cui sopra. Questo pone l'immagine dietro il testo, ma lo posiziona nell'angolo in alto a sinistra del blocco di testo.

5 Aggiungere il codice dopo i due punti seguenti "background-position" per indicare dove nel blocco di testo che si desidera posizionare l'immagine. È possibile utilizzare le parole "top", "centro", "fondo", "sinistra" e "destra", in qualsiasi combinazione. Ad esempio, il codice potrebbe essere la seguente: background-position: in alto a destra; e l'immagine sembra nell'angolo in alto a destra del blocco paragrafo. Codice producendo un'immagine di sfondo pienamente centrato nel blocco di testo sarebbe simile a questa: background-position: Centro ;.


Articoli Correlati