Immagine di sfondo in html. immagine di sfondo

In questo post ve lo racconto, come al solito imposta lo sfondo del sito usando HTML codice.

Ti mostrerò anche un eccellente servizio estero per la selezione di sfondi senza soluzione di continuità.
Ora le impostazioni del sito sono rese più semplici e convenienti tramite console CMS come WordPress.
A volte è necessario modificare i modelli di siti di vendita e questo articolo ti aiuterà in questo.

Se non sai cos'è HTML, quindi può essere genericamente chiamato la lingua dei siti o un insieme di regole in base alle quali vengono generati i siti.

Ad esempio, vedi un'immagine su un sito Web, quando nel codice HTML della pagina potrebbe apparire così:

Imposta un colore a tinta unita per lo sfondo della pagina.

Per installare sfondo a tinta unita, è necessario taggare Aggiungi attributo bgcolor.

< html >
< head >
< title >Titolo della pagina.

< body bgcolor = "#ffcc00" >

Puoi incollare questo codice in un file di testo e salvarlo con l'estensione .html. Quindi apri con qualsiasi browser e guarda il risultato.

Come avrai intuito, il colore di sfondo deriva dal codice colore nell'attributo bgcolor="valore" che puoi trovare cliccando su questo link.

Impostazione di un'immagine sullo sfondo di una pagina HTML.

In modo da imposta l'immagine di sfondo, puoi utilizzare l'attributo sfondo nell'etichetta .

< html >
< head >
< title >Titolo della pagina.

< body background = "http://сайт/images/mlmsecret.jpg" >Ciao. Questa è la mia prima pagina.

Potresti notare che l'attributo sfondoè uguale al percorso del file utilizzato come sfondo.

Per cambiare rapidamente lo sfondo o qualsiasi immagine sulla pagina, basta specificare un nuovo percorso per il file utilizzando un editor di testo.

Per scoprire il percorso precedente, è necessario nella pagina con l'immagine, fare clic con il pulsante destro del mouse sull'immagine e fare clic su "Copia URL immagine". in questo modo vedrai il nome dell'immagine/sfondo. È quindi possibile sostituire semplicemente la vecchia immagine con la propria utilizzando lo stesso nome file.

Queste erano le basi per l'installazione. sfondo in html, ora il più interessante. 🙂

I browser moderni consentono di aggiungere un numero arbitrario di immagini di sfondo a un elemento, elencando i parametri di ogni sfondo separati da virgole. È sufficiente utilizzare la proprietà sfondo universale e specificare prima uno sfondo e il secondo separato da una virgola.

Come allungare lo sfondo per l'intera larghezza della finestra?

La proprietà background-size serve per ridimensionare lo sfondo, come valore viene specificato 100%, quindi lo sfondo occuperà l'intera larghezza della finestra del browser. Per i browser meno recenti, è necessario utilizzare proprietà prefissate specifiche, come mostrato nell'esempio 1.

Come aggiungere un'immagine di sfondo a una pagina web?

Per aggiungere un'immagine di sfondo a una pagina Web, specifica il percorso dell'immagine all'interno del valore dell'URL della proprietà dello stile di sfondo, che a sua volta viene aggiunto al selettore del corpo.

È possibile creare uno sfondo animato?

L'animazione è una tecnica abbastanza potente che può dare vita a qualsiasi documento, quindi non sorprende che la tecnologia Flash abbia guadagnato un'immensa popolarità, che aggiunge cartoni animati alle pagine Web, oltre a quelle interattive. Il formato grafico GIF supporta anche l'animazione più semplice attraverso cambi di fotogrammi sequenziali. Quindi, utilizzando un'immagine in questo formato, è consentito animare non solo le singole immagini, ma anche lo sfondo di una pagina Web o un elemento specifico.

Per prima cosa devi creare un'immagine animata in formato GIF, per la quale puoi utilizzare Adobe Photoshop o un altro programma adatto a questo scopo. Esistono anche librerie di file animati già pronti che possono essere utilizzati come immagine di sfondo. Successivamente, l'immagine viene aggiunta come sfondo utilizzando la proprietà dello stile di sfondo, come mostrato nell'esempio 1.

Come inserire un'immagine di sfondo nell'angolo in basso a destra di una pagina?

Per controllare la posizione dell'immagine di sfondo sulla pagina, viene utilizzata la proprietà dello stile posizione sfondo, che imposta contemporaneamente le coordinate orizzontali e verticali dell'immagine. Per interrompere la ripetizione di un'immagine di sfondo, utilizzare la proprietà background-position con il valore no-repeat .

Come fare in modo che lo sfondo non si ripeta?

Per impostazione predefinita, l'immagine di sfondo si ripete orizzontalmente e verticalmente, affiancando l'intero campo della pagina web. Tuttavia, questo comportamento dello sfondo non è sempre richiesto, soprattutto nel caso di una singola immagine, quindi viene in soccorso il valore no-repeat aggiunto alla proprietà dello stile di sfondo.

Come posso fare in modo che lo sfondo si ripeta solo verticalmente?

La ripetizione dello sfondo è solitamente richiesta per creare linee decorative o sfumature legate all'altezza di un elemento o di una finestra su una pagina web. In questi casi, la ripetizione dello sfondo in verticale fornisce un'immagine solida indipendentemente dalle dimensioni degli elementi. Solo all'inizio dovresti fare attenzione che l'immagine di sfondo venga ripetuta senza giunture.

Il colore di sfondo è un elemento piuttosto importante di qualsiasi pagina web. In primo luogo, imposta il giusto stato d'animo e l'umore generale del sito e, in secondo luogo, facilita la percezione del testo.

Il colore di sfondo di una pagina web viene impostato utilizzando l'attributo bgcolor del tag .

Esempio 1: Modifica del colore di sfondo

Il colore può essere specificato in valore esadecimale o in base al suo nome.

Sebbene sia possibile specificare qualsiasi colore per lo sfondo, la maggior parte dei siti utilizza uno sfondo prevalentemente bianco e caratteri neri come opzione più consolidata.

immagine di sfondo

Come sfondo, puoi utilizzare qualsiasi immagine adatta per questo. Lo sfondo non dovrebbe sminuire il testo, mentre dovrebbe fondersi bene con la combinazione di colori della pagina web ed essere di piccole dimensioni per caricarsi rapidamente. Se, dopo quanto sopra, desideri comunque aggiungere un'immagine di sfondo alla pagina, dovresti utilizzare l'attributo background del tag .

Esempio 2: aggiunta di un'immagine di sfondo

Se l'immagine è più piccola della dimensione dello schermo del monitor, verrà riprodotta orizzontalmente e verticalmente.

Poiché l'immagine di sfondo si carica più lentamente del colore di sfondo, può succedere che il testo non sia leggibile per un po' finché le immagini non vengono caricate. La stessa cosa può accadere con le immagini disabilitate nel browser. Pertanto, si consiglia di impostare sempre il colore di sfondo insieme all'immagine di sfondo (esempio 3).

Esempio 3: utilizzo di un'immagine di sfondo e di un colore di sfondo

sfondo fisso

Per impostazione predefinita, quando si utilizza la barra di scorrimento, l'immagine di sfondo si sposta con il contenuto della pagina web. Internet Explorer consente di correggere lo sfondo utilizzando l'attributo bgproperties="fixed" del tag .

Esempio 4 - Impostazione di uno sfondo fisso

Specificando l'attributo bgproperties, come mostrato nell'Esempio 4, l'immagine di sfondo sulla pagina Web rimarrà fissa e testo, grafica e altri elementi si sposteranno con la barra di scorrimento.

Per creare un sito, una questione importante è come creare uno sfondo in html. Questa procedura prevede l'uso di determinati tag: parole e lettere in codice. Grazie a loro, puoi inserire uno sfondo diverso, renderlo monofonico, riempirlo o mettere qualsiasi immagine al posto dello sfondo. Tali azioni saranno molto utili per tutti i progettisti di layout e per coloro che decidono di "vestire" il proprio sito da soli.

Fare lo sfondo

Prima di creare lo sfondo del sito html, devi aprire il codice della pagina html in un editor di testo. Ricorda che i tag sulla pagina sono posizionati verticalmente. Quindi, tra i tag … , devi mettere un tag- Questi tag sono necessari per chiarire lo stile degli elementi di questa pagina web. Al posto dei tre punti, devi scrivere - body (background:) . Questa è un'impostazione che ti consente di impostare stili diversi per lo sfondo della pagina. È possibile eseguire l'operazione di impostazione del colore in due modi. Primo:

Body (background:#000000) - Lo sfondo della pagina ora dovrebbe essere nero.

Questo metodo è adatto anche per impostare sia il colore che l'immagine di sfondo. È dopo i due punti che puoi inserire un codice colore o un collegamento a un'immagine. Oppure puoi utilizzare un metodo che significa solo impostare un colore: un riempimento specifico per la pagina. Dopo i due punti, è necessario registrare il cosiddetto parametro - colore. E dopo, inserisci il codice del colore stesso. Questo metodo è buono se usato come modello. Registralo e salvalo e, quando necessario, imposta il colore, mettilo sulla pagina.

Puoi inserire, invece di uno sfondo semplice, un'immagine. Se hai bisogno di scoprire: in html, come fare di un'immagine uno sfondo, allora devi fare operazioni simili. Registra i tag, inserisci il corpo (sfondo: link all'immagine). Va ricordato che l'immagine stessa può essere ovunque. E su un sito Web su Internet, ma è meglio creare una cartella nella radice del documento. Nella cartella all'interno della quale verranno archiviate tutte le informazioni sulla pagina del sito, è necessario crearne un'altra per le immagini. L'operazione sarà simile a questa:

Ora l'immagine che hai scelto farà da sfondo all'intera pagina del sito. Ci auguriamo che tu capisca come creare uno sfondo in html. Provalo e avrai sicuramente successo!

Molti designer di layout alle prime armi, che stanno solo approfondendo l'essenza della creazione di siti, spesso si chiedono come creare un'immagine di sfondo in html. E se alcune persone riescono a capire questo compito, ci sono ancora problemi durante l'allungamento dell'immagine per l'intera larghezza del monitor. Allo stesso tempo, vorrei che il sito fosse visualizzato allo stesso modo su tutti i browser, quindi il requisito di compatibilità tra browser deve essere soddisfatto. Puoi impostare lo sfondo in due modi: usando e lo stile CSS. Ognuno sceglie l'opzione migliore per se stesso. Naturalmente, lo stile CSS è molto più conveniente, perché il suo codice è memorizzato in un file separato e non occupa colonne extra nei tag principali del sito, ma prima diamo un'occhiata a un metodo semplice per impostare un'immagine sullo sfondo del sito.

Tag HTML di base per la creazione di uno sfondo

Quindi, passiamo al problema, lo sfondo in html è a schermo intero. Affinché il sito appaia bello, è necessario comprendere un dettaglio piuttosto importante: è sufficiente creare uno sfondo sfumato o dipingerlo con un colore solido, ma se è necessario inserire un'immagine sullo sfondo, non lo farà estendersi per l'intera larghezza del monitor. Inizialmente, devi scegliere un'immagine o creare tu stesso un design con tale estensione in cui visualizzerai la pagina del sito. Solo dopo che l'immagine di sfondo è pronta, la trasferiamo in una cartella chiamata "Immagini". In esso memorizzeremo tutte le immagini utilizzate, le animazioni e altri file grafici. Questa cartella dovrebbe essere nella directory principale con tutti i tuoi file html. Ora possiamo passare al codice. Ci sono diverse opzioni per scrivere codice che cambierà lo sfondo in un'immagine.

1. Scrivi tag attributo.
2. Attraverso lo stile CSS nel codice HTML.
3. Scrivi lo stile CSS in un file separato.

Sta a te decidere come rendere lo sfondo un'immagine in HTML, ma vorrei spendere qualche parola su come sarebbe ottimale. Il primo metodo, scrivendo tramite un attributo tag, è stato a lungo deprecato. La seconda opzione viene utilizzata in casi molto rari, solo perché c'è molto dello stesso codice. E la terza opzione è la più comune ed efficace. Ecco alcuni esempi di tag HTML:

1. Il primo modo per scrivere è tramite l'attributo tag (body) nel file index.htm. È scritto in questo modo: (body background= "Folder_name/Image_name.extension")(/body). Cioè, se abbiamo un'immagine con il nome "Picture" e l'estensione JPG e abbiamo chiamato la cartella come "Images", la voce del codice HTML sarà simile a questa: (body background="Images/Picture.jpg" )… (/corpo) .
2. Il secondo metodo di scrittura ha effetto sullo stile CSS ma è scritto nello stesso file chiamato index.htm. (body style="background: url("../Images/Picture.jpg")").
3. E il terzo metodo di registrazione è realizzato in due file. In un documento chiamato index.htm, è scritta la seguente riga: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). E nel file di stile chiamato style.css scriviamo già: body (background: url (Images/Picture.jpg")).

Come rendere lo sfondo un'immagine in HTML, abbiamo smantellato. Ora devi capire come allungare l'immagine sull'intero schermo.

Modi per estendere l'immagine di sfondo alla larghezza della finestra

Rappresentiamo il nostro schermo come percentuale. Si scopre che l'intera larghezza e lunghezza dello schermo sarà 100% x 100%. Dobbiamo allungare l'immagine a questa larghezza. Aggiungiamo una riga alla voce dell'immagine nel file style.css, che allungherà l'immagine per l'intera larghezza e lunghezza del monitor. Come è scritto in stile CSS? Tutto è semplice!

sfondo: url(Images/Picture.jpg")

dimensione dello sfondo: 100% /* questa voce funzionerà con la maggior parte dei browser moderni */

Quindi abbiamo capito come creare un'immagine come sfondo in html a schermo intero. C'è un altro modo per scrivere nel file index.htm. Sebbene questo metodo sia obsoleto, è necessario che i principianti lo conoscano e lo capiscano. Nel tag (head)(style) div ( background-size: cover; ) (/style) (/head), questa voce significa che selezioniamo un blocco speciale per lo sfondo, che sarà posizionato su tutta la larghezza del finestra. Abbiamo esaminato 2 modi per rendere lo sfondo del sito un'immagine html in modo che l'immagine si estenda per l'intera larghezza dello schermo in qualsiasi browser moderno.

Come creare uno sfondo fisso

Se decidi di utilizzare un'immagine come sfondo di una futura risorsa web, devi solo scoprire come renderla immobile in modo che non si allunghi in lunghezza e rovini l'aspetto estetico. Basta solo prescrivere questa piccola aggiunta con l'aiuto. Devi aggiungere una frase nel file style.css dopo background: url(Images/Picture.jpg") fixed; o invece aggiungere una riga separata dopo il punto e virgola - position: fixed. Pertanto, l'immagine di sfondo verrà fissata. Durante scorrendo il contenuto del sito, vedrai che le righe di testo si spostano, ma lo sfondo rimane al suo posto. Così hai imparato a rendere lo sfondo un'immagine in html, in diversi modi.

Lavorare con una tabella in HTML

Molti sviluppatori web inesperti, di fronte a tabelle e blocchi, spesso non capiscono come fare di un'immagine lo sfondo di una tabella in html. Come tutto e lo stile CSS, questo linguaggio di programmazione web è abbastanza semplice. E la soluzione a questo problema sarà scrivere un paio di righe di codice. Dovresti già sapere che la scrittura delle righe e delle colonne della tabella è indicata rispettivamente dai tag (tr) e (td). Per rendere lo sfondo della tabella simile a un'immagine, aggiungi una semplice frase al tag (table), (tr) o (td) con un collegamento all'immagine: background = URL dell'immagine. Per chiarezza, diamo un paio di esempi.

Tabelle con un'immagine invece di uno sfondo: esempi HTML

Disegniamo una tabella 2x3 e ne facciamo lo sfondo dell'immagine salvata nella cartella “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table) . Quindi il nostro tavolo sarà dipinto sullo sfondo dell'immagine.

Ora disegniamo la stessa tabella di dimensioni 2x3, ma inseriamo l'immagine nelle colonne numerate 1, 4, 5 e 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”) 5( /td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). Dopo la visualizzazione, vediamo che lo sfondo appare solo in quelle celle in cui ci siamo registrati e non nell'intera tabella.

Sito cross-browser

Esiste anche una risorsa web cross-browser. Ciò significa che le pagine del sito verranno visualizzate ugualmente correttamente in diversi tipi e versioni di browser. In questo caso, è necessario personalizzare il codice HTML e lo stile CSS per i browser necessari. Inoltre, nell'era moderna dello sviluppo degli smartphone, molti sviluppatori web stanno cercando di creare siti adattati sia alle versioni mobili che alla visualizzazione del computer.