Consigli Utili

Come creare rapidamente e facilmente un'immagine di sfondo usando HTML

Pin
Send
Share
Send
Send


Ogni stanza avrà un aspetto molto migliore se è coperta con un costoso tappeto persiano. Qual è il peggio del tuo sito? Forse è giunto il momento di "coprire" il suo pavimento con un costoso ed elegante palazzo fatto a mano. Esamineremo in modo più dettagliato come creare uno sfondo per il sito:

Selezione dell'immagine

Vorrei iniziare scegliendo un'immagine. Per rendere lo sfondo più uniforme e bello sulla pagina, non è necessario preoccuparsi delle dimensioni e dell'allineamento. Suggerisco di cercare immediatamente una trama senza soluzione di continuità. Cos'è questo?

Sfortunatamente, non è possibile estendere un'immagine in HTML a schermo intero. La foto è utilizzata a grandezza naturale. Se l'immagine è piccola, aprirà l'intera area, come nello screenshot qui sotto. Per allungare l'immagine devi creare un documento css aggiuntivo, senza questo non funzionerà.

Tuttavia, hai l'opportunità di aggirare il sistema. Per fare ciò, utilizzare Photoshop e ridimensionare l'immagine in base alla larghezza dello schermo (1280x720). Anche se in questo caso, quando si scorre verso il basso, l'immagine sostituirà un'altra.

Un'opzione molto migliore se non si desidera utilizzare CSS sarebbe quella di utilizzare trame senza soluzione di continuità. Non vedono nessuna articolazione. Sono come carta da parati o piastrelle moderne nel design. Uno sostituisce l'altro e non sono visibili articolazioni.

Se sei interessato a immagini gratuite e alla mancanza di conseguenze legali per il loro utilizzo, ti consiglio di cercare sul sito Pixabay.com.

Ora lavoriamo con il codice. Devo dire subito che stiamo lavorando con HTML ora, cioè stiamo cambiando l'immagine non per l'intero sito, ma solo per una pagina specifica per la quale viene scritto il codice. Se sei interessato a modificare l'intera risorsa, devi creare il codice usando css, ma ne parleremo più avanti.

Quindi puoi lavorare nel blocco note, preferisco NotePad ++. È molto più conveniente lavorarci sopra: il codice viene aggiunto per te, i tag vengono evidenziati. Il programma è gratuito e pesa circa 3 MB. Consiglio vivamente, soprattutto se sei un principiante.

Quindi nel tag corpo devi aggiungere un attributo sfondo e specificare un collegamento all'immagine, da dove verrà presa la foto. Ecco come appare nel programma.

Puoi semplicemente aprire il blocco note e copiare questo codice. Tra virgolette, metti un link all'immagine che ti piace.

Immagine come sfondo della pagina - HTML

Innanzitutto, considera il metodo di impostazione dell'immagine di sfondo sul sito utilizzando l'attributo sfondo etichetta corpo:

Come nell'esempio sopra, oltre all'immagine, si consiglia di indicare il colore di sfondo (verrà visualizzato sul sito quando la pagina viene caricata), che verrà combinato con l'immagine di sfondo e creerà un contrasto con il testo sul sito. Ad esempio, se si utilizza il colore bianco del testo sul sito, è necessario specificare un colore di sfondo scuro e impostare un'immagine di sfondo scuro. In questo caso, il testo sarà di facile lettura.

Nota: Si consiglia di impostare l'immagine di sfondo e il colore di sfondo non utilizzando HTML, ma utilizzando CSS. In questo caso, il codice sarà valido e più corretto.

Immagine come sfondo della pagina - CSS

Nel CSS, il colore e l'immagine di sfondo possono essere impostati con una proprietà. sfondo:

Qui usando la proprietà background-attachment lo sfondo della pagina è fisso e utilizza la proprietà background-repeat la ripetizione orizzontale dell'immagine è impostata. Ma vale la pena considerare che l'immagine di sfondo dovrebbe "cucire" bene lungo i bordi.

Se si desidera estendere l'immagine di sfondo alla dimensione massima della finestra del browser, utilizzare la proprietà dimensione dello sfondo: 100%,

Nel generatore di siti Nubex, per qualsiasi sito è possibile utilizzare un'immagine di grandi dimensioni come sfondo e correggerla.

Sfondo per il sito

Succede che il vecchio design del sito sia già noioso. E voglio qualcosa di nuovo e gustoso. E il nuovo design sarà tale se lo cucini da solo.

Ma cambiare completamente l'intero progetto della risorsa da soli è una cosa ingrata. E non tutti hanno le mani affilate in questo settore. Pertanto, è più semplice aggiornare il vecchio modello modificando il colore di sfondo della risorsa o la sua immagine di sfondo.

Esistono diversi modi per modificare lo sfondo sul sito. Per fare ciò, utilizzare le funzionalità di CSS o html. Ma molte delle proprietà per lavorare con lo sfondo hanno lo stesso nome e la stessa metodologia applicativa in queste tecnologie web.

Nozioni di base sullo sfondo HTML

Puoi utilizzare diversi elementi come sfondo:

  • colore
  • Immagine di sfondo
  • Immagine di trama.

Tratteremo ciascuno di essi in modo più dettagliato.

Per impostare il colore di sfondo per il sito, viene utilizzata la proprietà color di sfondo dello stile dell'attributo style. Cioè, per impostare il colore primario per una pagina Web, è necessario registrarlo all'interno del tag. Per esempio:

HTML supporta solo 16 parole chiave per colore. Eccone alcuni: bianco, rosso, blu, nero, giallo e altri.

Pertanto, al fine di impostare lo sfondo per il sito html, è meglio usare il formato esadecimale o RGB.

Oltre alla selezione del colore, sono disponibili anche altre impostazioni. Se la proprietà del colore di sfondo è impostata su trasparente, lo sfondo della pagina diventerà trasparente. Questo valore è assegnato a questa proprietà per impostazione predefinita.

Ora considera le possibilità del linguaggio ipertestuale di impostare lo sfondo per il sito. Questo può essere fatto usando la proprietà image-background.

Supponiamo che stiamo sviluppando un sito sulla poesia e che dobbiamo usare un'immagine di Pegasus come substrato. Il cavallo alato incarnerà la libertà del pensiero creativo del poeta!

  • repeat-x - ripete l'immagine di sfondo in orizzontale,
  • repeat-y - verticalmente,
  • ripeti - su entrambi gli assi,
  • no-repeat - la ripetizione è vietata.

Tra le opzioni elencate, siamo interessati a quest'ultima. Prima di cambiare lo sfondo del sito, lo usiamo nel nostro codice:

  • Parola chiave (in alto, in basso, al centro, a sinistra, a destra),
  • Percentuale: il conto alla rovescia inizia dall'angolo in alto a sinistra,
  • In unità di misura (pixel).

Utilizziamo l'opzione di centraggio più semplice:

Succede che devi correggere la posizione dell'immagine durante lo scorrimento. Pertanto, prima di creare un'immagine come sfondo del sito, utilizzare la speciale proprietà di sfondo allegato. I valori che accetta sono:


  • scroll,
  • fissa.

Abbiamo bisogno dell'ultimo valore. Ora il codice del nostro esempio sarà simile al seguente: [/ HTML]

Sfondo del sito strutturale

Nel primo esempio, per lo sfondo, abbiamo usato un grande e bellissimo paesaggio desertico. Ma per tale bellezza devi pagare per intero. Il peso di un'immagine realizzata in alta qualità può raggiungere diversi megabyte.

Questo importo non influisce sulla velocità di caricamento della pagina del browser con una connessione Internet ad alta velocità. Ma per quanto riguarda l'Internet mobile, usando quale download di alcuni "metri" richiederà molto tempo?

Tutti questi problemi vengono risolti utilizzando uno sfondo di trama. Usa una piccola immagine come modello di trama. Anche se viene ripetuto più volte, il disegno viene caricato una sola volta.

Per creare uno sfondo scuro per il sito, vai su Photoshop, crea un'immagine sotto forma di una striscia di 1200 pixel di lunghezza e 15 pixel di larghezza. Quindi applica una semplice sfumatura in bianco e nero e collega la trama risultante alla pagina del sito:

Per chiarezza, abbiamo aggiunto del testo e ne abbiamo impostato il colore usando la proprietà color. Ecco cosa è successo:

Strumenti CSS

Tutte le proprietà sopra descritte sono applicabili anche ai fogli di stile a cascata. Crea lo sfondo del sito CSS riscrivendo il codice per uno dei nostri esempi precedenti:

Il risultato sarà simile.

Bene, qui abbiamo esaminato tutte le opzioni su come cambiare lo sfondo sul sito. Ora non resta che creare un disegno del tappeto futuro e diffonderlo sulle pagine della tua risorsa. Ma questo dipende già da te.

Pin
Send
Share
Send
Send