Sfondo dalla foto in html. immagine di sfondo

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.

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!

Vlad Merzevich

Per le peculiarità delle pagine web, le immagini di sfondo acquisiscono un ruolo significativo nel layout dei documenti del sito. Allo stesso tempo, sono attivamente coinvolti in una varietà di attività, ad esempio automatizzando il processo di allegare immagini al testo, creando transizioni sfumate e, naturalmente, aggiungendo uno sfondo sotto il contenuto. Di seguito sono riportati alcuni aspetti dell'utilizzo delle immagini di sfondo.

Sfondo su una pagina web

L'impostazione dell'immagine di sfondo su una pagina Web viene tradizionalmente eseguita tramite l'attributo background del tag . Tale schema viene ripetuto orizzontalmente e verticalmente, riempiendo in questo modo l'intera finestra del browser. Chiaramente, qui non ci sono opzioni speciali per la creatività, quindi passiamo agli stili e vediamo cosa possiamo fare con i CSS.

Ci sono cinque attributi in CSS che controllano un'immagine di sfondo: il suo inserimento, posizione e ripetizione. Tuttavia, tutti questi parametri vengono sostituiti da un background di proprietà universale e lo utilizzeremo in futuro.

Aggiunta di un'immagine di sfondo

L'aggiunta di un'immagine avviene impostando l'indirizzo dell'immagine tramite la parola chiave url. Gli argomenti no-repeat (nessuna ripetizione), repeat-x (ripetizione orizzontale) e repeat-y (ripetizione verticale) vengono utilizzati per controllare il modo in cui l'immagine si ripete. Ciò si traduce nella pagina web mostrata in Fig. uno.

Per impostare un'immagine su una pagina Web, aggiungi la proprietà dello stile di sfondo al selettore BODY, come mostrato nell'esempio 1.

Esempio 1. Immagine di sfondo

In questo esempio, il grafico target.gif è definito come lo sfondo della pagina web senza ripetere l'immagine. Per evitare che l'immagine sia aderente ai bordi del browser, viene spostata di 30 pixel a destra e di 20 pixel in basso rispetto alla sua posizione originale.

ripetizione del modello

Con la possibilità di impostare l'immagine di sfondo in modo che si ripeta orizzontalmente o verticalmente, sono disponibili diverse opzioni di progettazione di pagine Web. Ad esempio, per creare una striscia verticale lungo il bordo sinistro (Fig. 2), è necessaria l'immagine mostrata in Fig. 3.

Il disegno dovrebbe essere tale che si unisca verticalmente senza cuciture evidenti e formi anche un unico insieme con il colore di sfondo dato della pagina web. L'esempio 2 mostra come creare un'immagine di sfondo di questo tipo, usando ancora la proprietà background e il suo valore repeat-y .

Esempio 2: ripeti lo sfondo verticalmente

Allo stesso modo, puoi ripetere lo sfondo in orizzontale, ad esempio creando un gradiente e impostandolo come immagine di sfondo (Fig. 4).

Per ottenere la pagina web mostrata in Fig. 4, dovrai prima creare un'immagine con una transizione graduale. La larghezza è sufficiente per specificare 20-40 pixel e l'altezza dell'immagine dipende dallo scopo del documento e dall'altezza prevista del contenuto della pagina web. Inoltre, non dimenticare che un disegno di grandi dimensioni comporterà un aumento delle dimensioni del file grafico. E questo influenzerà negativamente la velocità del suo caricamento e, in definitiva, rallenterà la visualizzazione dello sfondo. Per questo caso, un'immagine di 30x200 pixel era abbastanza adatta (Fig. 5).

L'esempio 3 mostra il codice HTML per creare uno sfondo sfumato.

Esempio 3: ripetizione dello sfondo orizzontalmente

Il motivo sfumato funziona bene con il blocco di colore solido, quindi questo esempio aggiunge un livello per visualizzare il contenuto della pagina Web.

Aggiunta di un'immagine al testo

Con un'immagine di sfondo, puoi automatizzare il processo di aggiunta di immagini a un testo specifico, come i titoli. A tale scopo, utilizzare la proprietà background universal, che viene applicata al selettore desiderato. Come valore, specificare il percorso dell'immagine e, in modo che non si ripeta, l'argomento no-repeat (esempio 4).

Esempio 4: aggiunta di un'immagine

intestazione

Testo principale

Come mostrato in questo esempio, l'immagine può essere spostata orizzontalmente e verticalmente dalla sua posizione originale, per impostazione predefinita questo è l'angolo superiore sinistro dell'elemento del blocco. Lo spostamento dello sfondo consente di impostare l'immagine in relazione al testo nel modo desiderato. Per evitare che il testo si sovrapponga all'immagine, assicurati di aggiungere la proprietà padding-left, a causa della quale il testo viene spostato a destra della distanza specificata. È individuale in ogni caso e di solito è uguale alla larghezza dell'immagine più la spaziatura desiderata tra l'immagine e il testo.

Impostare un colore di sfondo e/o un'immagine per una pagina o un singolo elemento è abbastanza semplice. La cosa principale è sapere dove e come farlo, oltre ad avere un codice colore e/o un'immagine di sfondo. È possibile che imparerai molto da questo articolo, ma l'ho creato appositamente per i principianti. Pertanto, tutto sarà il più breve e dettagliato possibile allo stesso tempo. La cosa principale è che otterrai non solo un'idea generale ed esempi già pronti, ma anche una comprensione di come creare uno sfondo in HTML.

Per impostare lo sfondo in HTML usa DOCTYPE intermedio

E inizierò con il fatto che HTML5 non c'è modo di impostare. È stato deciso di portare questa funzionalità nei CSS. Pertanto, se prevedi di utilizzare quanto segue e desideri ottenere un codice valido (corretto), devi fermarti al tipo di documento transitorio. Per fare ciò, la tua pagina web deve iniziare con la seguente riga:

di transizione//IT" "http://www.w3.org/TR/html4/loose.dtd">

Ora che ne abbiamo parlato, passiamo alla comprensione di come viene creato lo sfondo. E la prima cosa da notare qui è la differenza tra colore di sfondo e immagine di sfondo. All'inizio va colore di sfondo, che riempie l'intero spazio disponibile della pagina o del suo elemento. Su di esso è sovrapposta una ripetizione immagine di sfondo. Visivamente, questo può essere rappresentato come segue:

Lo sfondo di un documento HTML e dei suoi elementi

La seconda cosa che devi sapere è la differenza tra corpo del documento e elemento del documento. Corpo del documento indicato nel codice HTML della pagina web dal tag BODY, che include tutto il contenuto della pagina web. Ovviamente, lo sfondo del corpo del documento non può essere trasparente. Se lo sfondo del corpo del documento non è impostato, viene utilizzato il valore predefinito impostato nelle impostazioni del browser.

Elementi della pagina sono all'interno del tag BODY. È interessante notare che non è possibile impostare il colore e/o l'immagine di sfondo utilizzando HTML per tutti gli elementi del documento. Ad esempio, un'immagine di sfondo può essere specificata solo per le tabelle. Per impostazione predefinita, di solito hanno uno sfondo trasparente.

L'attributo bgcolor per creare il colore di sfondo

Per impostare colore di sfondo il documento o i suoi elementi utilizzano l'attributo bgcolor, ad esempio:

In questo caso, stiamo impostando il colore di sfondo per la pagina nel suo insieme. Ed ecco un esempio di come impostare il colore di sfondo per una tabella, nel tag TABLE:

È interessante notare che il colore di sfondo nella tabella può essere specificato sia per le righe nel tag TR che per le loro celle nel tag TD.

Come trovare il codice colore?

Probabilmente hai già notato che il colore in HTML è impostato da uno speciale codice, ad esempio: #ec008c . Per conoscere il codice del colore di cui hai bisogno puoi utilizzare uno degli editor grafici. Ad esempio, in Photoshop puoi usare " Strumento per il collirio» (Pipetta) per ottenere il colore da un punto dell'immagine. Quindi, devi fare clic sul colore risultante sulla barra degli strumenti e nella finestra che si apre " color Picker» (Seleziona colore) copia il codice colore.

Attiro la vostra attenzione sul fatto che questo codice sarà senza il cancelletto (#) all'inizio, questo segno dovrà essere aggiunto manualmente.

Puoi anche utilizzare numerosi servizi online, ad esempio:

• eccetera.

Il loro principio di funzionamento è ancora più semplice: fai clic sul colore desiderato e ottieni il suo codice.

L'attributo background per creare un'immagine di sfondo

Così come nel caso del colore di sfondo e nel caso di immagine di sfondo, È necessario utilizzare un attributo speciale, ovvero background , ad esempio:

In questo caso, impostiamo l'immagine di sfondo per la pagina nel suo insieme. È interessante notare che a causa della limitazione delle dimensioni dell'immagine, verrà ripetuto, ad esempio:

Come puoi vedere, quando si ripete, la transizione tra le immagini è evidente. Pertanto, vengono spesso utilizzate immagini speciali, in cui viene preso in considerazione questo momento.

Ed ecco un esempio di come impostare un'immagine di sfondo per una tabella, nel tag TABLE:

È interessante notare che l'immagine di sfondo può essere impostata solo per la tabella nel suo insieme e/o per la sua singola cella. Non funzionerà per una stringa.

Percorso assoluto e relativo dell'immagine di sfondo

Particolare attenzione dovrebbe essere prestata indirizzo immagine di sfondo. In questo caso viene utilizzato un percorso relativo all'immagine, ad es. l'indirizzo è relativo alla posizione del file immagine nel file della pagina web. Questa opzione non può essere definita particolarmente efficace. È meglio utilizzare il percorso assoluto dell'immagine, ad es. il suo URL completo, Per esempio:

In questo caso, non avrai problemi associati. Puoi leggere di più su questo.

Riassumendo

L'uso degli attributi bgcolor e background è obsoleto, quindi dovrai utilizzare un DOCTYPE di transizione per rendere valido il tuo codice HTML. Per impostare il colore di sfondo in HTML, utilizza codici speciali che puoi trovare in un editor grafico o utilizzando speciali servizi online. L'immagine di sfondo viene duplicata all'interno dell'area assegnata e si trova sopra il colore di sfondo. Per specificare un'immagine di sfondo, è meglio utilizzare il suo URL completo. Questo è tutto per me. Grazie per l'attenzione. Buona fortuna!

Se hai bisogno di organizzare un documento in Microsoft Word non solo correttamente, ma anche magnificamente, allora è meglio usare una sorta di immagine sullo sfondo. Può essere preso da chiunque, ma è meglio che corrisponda al testo stampato. Può anche essere un logo o il nome di un'azienda. Se li metti dietro il testo, sembra più carino di una filigrana o di uno sfondo e attira più attenzione.

Nell'articolo considereremo questo argomento e impareremo come trasformare un'immagine come sfondo in MS Word.

Aggiungi un'immagine tramite la voce di menu corrispondente

È possibile selezionare un'immagine per una pagina in Word 2007, 2010 e 2013 come segue. Apri il documento desiderato e vai alla scheda "Impaginazione". Quindi fare clic sul pulsante "Colore pagina" e selezionare dal menu.

Se hai installato Word 2016, quindi in un documento aperto, vai alla scheda "Design", quindi esegui tutto come descritto sopra: "Colore pagina" - "Metodi di riempimento".

Si aprirà una piccola finestra di dialogo. In esso, vai alla scheda "Immagine" e fai clic sul pulsante con lo stesso nome, che si trova sotto l'area vuota al centro.

In Word 2016, questo apparirà davanti alla finestra mostrata nello screenshot qui sopra. In esso puoi scegliere da dove vuoi inserire un'immagine, può essere un'immagine da un computer o trovare quella che ti serve tramite la ricerca.

Dopo aver selezionato un'immagine, fare clic su "OK" nella finestra corrispondente.

Il vantaggio di questo metodo è che lo sfondo scelto si applica a tutte le pagine del documento.

Lo svantaggio è che l'immagine deve essere della giusta dimensione. Come puoi vedere, nell'esempio è visibile un solo pinguino. Di conseguenza, devo salvare questa immagine con una dimensione diversa tramite un editor, ad esempio Paint.

Fare di un'immagine lo sfondo della pagina

Diamo un'occhiata a un altro modo in cui puoi creare l'immagine di sfondo desiderata.

Apri un documento e vai alla scheda. Quindi fare clic sul pulsante Immagine per aggiungerlo alla pagina.

Nella finestra successiva, trova ciò che si adatta al tuo computer, seleziona e fai clic su "Incolla".

Dopo aver aggiunto l'immagine, fai clic con il pulsante destro del mouse su di essa e seleziona dal menu di scelta rapida "Testo a capo" - "Dietro il testo".

Ora tutto il testo che è nel documento verrà visualizzato davanti all'immagine. Per rendere l'immagine selezionata lo sfondo dell'intero foglio e rimuovere i margini bianchi, è necessario allungarla. Per fare ciò, fare clic sull'immagine. I pennarelli appariranno immediatamente lungo i bordi: punti agli angoli e un punto su ciascun lato. Usando questi pennarelli, allunga la cornice in larghezza e altezza in modo da coprire l'intero foglio.

Questo è come è successo a me. Il vantaggio del metodo è che puoi scegliere autonomamente quale parte dell'immagine verrà visualizzata sul foglio: nella sua interezza, oppure puoi allungare e fare in modo che venga visualizzata solo una determinata area.

Ma se hai bisogno di un'immagine da utilizzare e ci sono molte pagine nel documento, allora è meglio scegliere la dimensione adatta e farne uno sfondo, come descritto nel primo paragrafo.

I tuoi documenti sembreranno più interessanti dopo aver inserito un'immagine adatta come sfondo delle pagine. Ricorda solo che il testo non dovrebbe essere perso sullo sfondo selezionato e dovrebbe corrispondere al testo.