brevi informazioni

Versioni CSS

Valori

url Il valore è il percorso del file grafico, specificato all'interno del costrutto url(). Il percorso del file può essere scritto tra virgolette (doppie o singole) o senza di esse. none Disabilita l'immagine di sfondo per l'elemento. ereditare Eredita il valore del genitore.

HTML5 CSS2.1 IE Cr Op Sa Fx

Modello a oggetti

document.getElementById("elementID ").style. backgroundImage

Browser

Le versioni di Internet Explorer fino alla 7.0 inclusa applicano uno sfondo al bordo interno di un elemento su cui è impostata la proprietà hasLayout. Se l'elemento non ha un hasLayout , la proprietà background-image rispetterà i bordi dell'elemento, come specificato nelle specifiche. La differenza nella visualizzazione sarà evidente se i bordi sono tratteggiati o punteggiati anziché continui.

Se l'elemento è impostato su scroll o auto , Internet Explorer 8 avrà un ritardo verticale di un pixel quando lo sfondo scorre.

Le versioni di Internet Explorer fino alla 7.0 inclusa non supportano il valore di eredità.

Se lo sfondo è impostato per una riga della tabella (tag ), quindi Chrome, Safari, iOS lo visualizzano non come prescritto dalle specifiche, vale a dire per ciascuna cella separatamente. Mentre il browser dovrebbe mostrare uno sfondo a tinta unita per l'intera riga. L'esempio 2 mostra il codice che dimostra l'errore.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Il risultato di questo esempio nel browser Chrome è mostrato in Fig. 1. I browser Internet Explorer, Opera e Firefox visualizzano correttamente lo sfondo della linea (Fig. 2).

Riso. 1. Ripeti lo sfondo per ogni cella

Riso. 2. Sfondo dell'intera linea

Quando si configura qualsiasi sito Web, oltre alla funzionalità, il design è molto importante. Questo è ciò che definisce lo stile e il design di una particolare azienda o persona per la quale viene creato il sito web. Personalizzare il colore e l'immagine dello sfondo è semplice seguendo le istruzioni contenute in questo articolo.

Apri il tuo file HTML utilizzando Blocco note o qualsiasi altro editor di testo a cui sei abituato. Ad esempio, prendiamo una pagina web primitiva con un minimo di testo. Puoi aprire il file utilizzando qualsiasi browser.

Innanzitutto, cambia il colore dello sfondo, poiché le persone con una connessione Internet lenta non saranno in grado di vedere immediatamente l'immagine di sfondo del sito. Per un po', mentre l'immagine viene caricata, potranno vedere solo il colore del tuo sito.
Inserisci l'etichetta parametro bgcolor="*****", dove ***** è il codice colore. Puoi trovare i colori per HTML in qualsiasi editor grafico selezionando l'opzione "per web" o sul sito https://colorscheme.ru/color-names

Devi solo selezionare un colore nella tavolozza del cerchio e assegnarne l'intensità all'interno del quadrato. Sulla destra vedrai due codici per html. Copiali e incollali nel blocco note.

Dopo aver selezionato un colore e averlo inserito nel codice, verifica se hai fatto tutto correttamente visualizzando la pagina web risultante da un browser.

Ora puoi iniziare a inserire la tua immagine di sfondo. Posiziona l'immagine desiderata nella cartella dei codici per maggiore comodità. Dategli un nome in lettere latine.

Ora scopri la posizione del file facendo clic destro su di esso, selezionando "Apri con" e facendo clic su qualsiasi browser installato sul tuo computer.

Copia l'indirizzo dalla barra di ricerca del tuo browser.

Ora nel tag inserisci la riga:

• style="immagine-di-sfondo: url('file:///C:/Users/FILE_PATH.jpg')"

Salva il tuo file.

Controlla la tua pagina web. Vedrai che lo sfondo è stato sostituito dal tuo testo.

Tieni presente che per gli utenti con una risoluzione dello schermo più elevata, l'immagine verrà duplicata in basso a destra. Non avrà un bell'aspetto se l'immagine non è monocromatica. Esistono comandi speciali per correggere questo parametro.

• background-repeat: "Valore". Le opzioni per il tuo valore potrebbero essere: “repeat-x” – ripete l'immagine di sfondo sia in orizzontale che in verticale. “repeat-y” – ripetizione solo in verticale. “no-repeat” – l'immagine è fissata sul posto e non si ripete. “spazio” – l'intera pagina verrà riempita con il numero massimo di copie dell'immagine, quelle più esterne verranno ritagliate. “round” – la stessa opzione, ma i bordi dell’immagine verranno ridimensionati con attenzione;
• allegato in background: "Valore". Se sostituisci il tag "scroll" invece della parola Value, l'immagine scorrerà insieme al sito. “fixed” – lo sfondo rimane invariato durante lo scorrimento;
• dimensione dello sfondo: Valore Valore2. Qui i valori devono assumere un valore in pixel. Ad esempio: 100px 200px. Oltre ai pixel, sono accettati valori percentuali. Questa è un'opzione per riempire la pagina con un'immagine. Oltre ai numeri, puoi inserire due parametri: “contengono” – riempie la pagina con un’immagine lungo il lato lungo e “copertina” – riempie la pagina con un’immagine lungo la larghezza.

Una volta che conosci le basi per riempire una pagina con lo sfondo in HTML, sei pronto per creare il tuo primo sito web.

Vlad Merzhevich

A causa delle peculiarità delle pagine web, le immagini di sfondo svolgono un ruolo significativo nel layout dei documenti del sito. Allo stesso tempo, sono attivamente coinvolti in una varietà di cose, ad esempio automatizzando il processo di allegamento di immagini al testo, creando transizioni sfumate e, ovviamente, 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 di un'immagine di sfondo su una pagina Web avviene tradizionalmente tramite l'attributo background del tag. . Questo schema si ripete orizzontalmente e verticalmente, riempiendo così l'intera finestra del browser. È chiaro che qui non ci sono opzioni speciali per la creatività, quindi passiamo agli stili e vediamo cosa si può fare usando i CSS.

I CSS hanno cinque attributi che controllano l'immagine di sfondo: la sua aggiunta, posizione e ripetizione. Tuttavia, tutti questi parametri vengono sostituiti da una proprietà universale, background , che utilizzeremo in futuro.

Aggiunta di uno sfondo

L'aggiunta di un'immagine avviene impostando l'indirizzo dell'immagine utilizzando la parola chiave url. Per controllare la ripetizione di un'immagine, vengono utilizzati gli argomenti no-repeat, Repeat-x (ripeti orizzontalmente) e Repeat-y (ripeti verticalmente). Grazie a questo è possibile ottenere la pagina web mostrata in Fig. 1.

Per impostare un'immagine su una pagina web, è necessario aggiungere una proprietà di stile di sfondo al selettore BODY, come mostrato nell'Esempio 1.

Esempio 1: immagine di sfondo

In questo esempio, l'immagine target.gif è definita come sfondo della pagina web senza ripetere l'immagine. Per evitare che l'immagine si adatti perfettamente ai bordi del browser, viene spostata di 30 pixel a destra e di 20 pixel verso il basso rispetto alla posizione originale.

Ripetere uno schema

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

Il design deve essere tale da combaciare verticalmente senza cuciture evidenti e formare anche un tutt'uno con il colore di sfondo specificato della pagina web. L'esempio 2 mostra come creare un'immagine di sfondo di questo tipo, utilizzando nuovamente la proprietà background e il suo valore ripeti-y.

Esempio 2. Ripetizione dello sfondo verticalmente

Allo stesso modo, potete ripetere lo sfondo in orizzontale, ad esempio creando una sfumatura e impostandola come immagine di sfondo (Fig. 4).

Per ottenere la pagina web mostrata in Fig. 4, dovrai prima creare un'immagine con una transizione sfumata. 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. Non dimenticare inoltre che un disegno di grandi dimensioni aumenterà le dimensioni del file grafico. Ciò influirà negativamente sulla velocità di caricamento e, in definitiva, porterà a una visualizzazione dello sfondo più lenta. In 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 in orizzontale

Un design sfumato si sposa bene con un blocco di colore solido, quindi in questo esempio aggiungiamo un livello per visualizzare il contenuto della pagina web.

Aggiunta di un'immagine al testo

Utilizzando un'immagine di sfondo, puoi automatizzare il processo di aggiunta di elementi grafici a testo specifico, ad esempio titoli. Per fare ciò, utilizzare la proprietà universale dello sfondo, che viene applicata al selettore desiderato. Il valore è il percorso dell'immagine e, affinché non si ripeta, l'argomento di non ripetizione (esempio 4).

Esempio 4: aggiunta di un'immagine

Intestazione

Testo principale

Come mostrato in questo esempio, il disegno può essere spostato orizzontalmente e verticalmente dalla sua posizione originale, per impostazione predefinita questo è l'angolo superiore sinistro dell'elemento blocco. Lo spostamento dello sfondo consente di posizionare l'immagine rispetto al testo nel modo desiderato. Per evitare che il testo si sovrapponga all'immagine, è necessario aggiungere la proprietà riempimento-sinistra, grazie alla quale il testo viene spostato a destra della distanza specificata. È individuale in ogni caso e di solito corrisponde alla larghezza dell'immagine più lo spazio desiderato tra l'immagine e il testo.

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

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

Per ridimensionare lo sfondo, utilizza la proprietà background-size; imposta il suo valore su 100%, quindi lo sfondo occuperà l'intera larghezza della finestra del browser. Per le versioni precedenti dei browser, dovresti utilizzare proprietà specifiche con prefissi, 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, imposta il percorso dell'immagine all'interno del valore URL della proprietà dello stile di sfondo, che a sua volta viene aggiunto al selettore del corpo.

È possibile realizzare uno sfondo animato?

L'animazione è una tecnica abbastanza potente in grado di dare vita a qualsiasi documento, quindi non sorprende che la tecnologia Flash, che aggiunge cartoni animati alle pagine Web, e per di più interattive, sia diventata estremamente popolare. Il formato grafico GIF supporta anche semplici animazioni modificando sequenzialmente i fotogrammi. Quindi, utilizzando un'immagine in questo formato, è possibile animare non solo le singole immagini, ma anche lo sfondo di una pagina web o di un elemento specifico.

Per prima cosa dovrai creare un'immagine animata in formato GIF, per la quale puoi utilizzare Adobe Photoshop o un altro programma adatto allo 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 della pagina?

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

Come posso evitare che lo sfondo si ripeta?

Per impostazione predefinita, l'immagine di sfondo viene ripetuta orizzontalmente e verticalmente, formando un mosaico sull'intero campo della pagina web. Tuttavia, questo comportamento dello sfondo non è sempre richiesto, soprattutto quando si posiziona una singola immagine, quindi sarà utile aggiungere un valore di non ripetizione alla proprietà dello stile di sfondo.

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

La ripetizione dello sfondo è in genere necessaria per creare linee decorative o sfumature legate all'altezza di un elemento o finestra di una pagina Web. In questi casi, ripetendo lo sfondo verticalmente si ottiene un'immagine coerente, indipendentemente dalla dimensione degli elementi. Solo all'inizio dovresti assicurarti che l'immagine di sfondo venga ripetuta senza cuciture.

27/12/14 56,3K

Qualsiasi stanza avrà un aspetto molto migliore se il pavimento è ricoperto da un costoso tappeto persiano. Allora perché il tuo sito web è peggiore? Forse è il momento di “rivestire” il pavimento con un costoso ed elegante tappeto fatto a mano. Diamo uno sguardo più da vicino a come realizzare uno sfondo per un sito web:

Sfondo per il sito

Succede che il vecchio design del sito web è diventato noioso. E voglio qualcosa di nuovo e gustoso. E il nuovo design sarà lo stesso se lo realizzi tu stesso.

Ma cambiare completamente da soli l'intero design di una risorsa è un compito ingrato. E non tutti hanno le mani adeguatamente addestrate per questo compito. Pertanto, il modo più semplice per aggiornare un vecchio modello è modificare il colore di sfondo della risorsa o la sua immagine di sfondo.

Esistono diversi modi per cambiare lo sfondo su un sito Web. Per questo vengono utilizzate le funzionalità di CSS o html. Ma molte delle proprietà per lavorare con lo sfondo hanno lo stesso nome e metodo di applicazione in queste tecnologie web.

Nozioni di base su come lavorare con gli sfondi in HTML

Diversi elementi possono essere utilizzati come sfondo:

• Colore;
• Immagine di sfondo;
• Immagine della trama.

Diamo un'occhiata all'uso di ciascuno di essi in modo più dettagliato.

Per impostare il colore di sfondo per un sito, utilizza la proprietà background-color dell'attributo style. Cioè, per impostare il colore principale per una pagina web, è necessario scriverlo all'interno del tag . Per esempio:

Sfondo del sito web n. 55D52B

Oltre al codice colore esadecimale, è supportato un valore in formato parola chiave o RGB. Esempi:

Sfondo del sito web rgb(23,113,44)

Sfondo del sito web verde

L'impostazione del colore di sfondo utilizzando le parole chiave presenta una serie di limitazioni rispetto agli altri due metodi.

L'HTML supporta solo 16 parole chiave per impostare i colori. Eccone alcuni: bianco, rosso, blu, nero, giallo e altri.

Pertanto, per impostare lo sfondo di un sito html, è meglio utilizzare il formato esadecimale o RGB.

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

Ora diamo un'occhiata alle capacità del linguaggio ipertestuale per impostare un'immagine di sfondo per un sito. Questo può essere fatto utilizzando la proprietà background-image.

Come puoi vedere dal codice, l'immagine è collegata tramite il percorso URL specificato tra parentesi. Ma non tutte le immagini sono così grandi da riempire l'intera area dello schermo. Vediamo come verrà visualizzata l'immagine più piccola.

Supponiamo di sviluppare un sito web sulla poesia e di dover utilizzare un'immagine di Pegaso come sfondo. Il cavallo alato personificherà la libertà del pensiero creativo del poeta!

Abbiamo bisogno che l'immagine venga visualizzata una volta al centro dello schermo. Ma sfortunatamente il browser non capisce i nostri nobili desideri. Inoltre, visualizza un'immagine più piccola per lo sfondo del sito tutte le volte che l'area dello schermo può ospitarla:

Forse quattro cavalli sorridenti con le ali saranno di troppa ispirazione per i poeti. Pertanto vietiamo la clonazione del nostro Pegasus. Lo facciamo utilizzando la proprietà background-repeat. Valori possibili:

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

Tra le opzioni elencate, a noi interessa l'ultima. Prima di cambiare lo sfondo del sito, lo usiamo nel nostro codice:

Ma ovviamente sarebbe meglio se il nostro volantino si trovasse al centro dello schermo. La proprietà background-position è destinata proprio al posizionamento dell'immagine di sfondo sulla pagina. Puoi impostare le coordinate della posizione in diversi modi:

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

Usiamo l'opzione di centratura più semplice:

Succede che sia necessario fissare la posizione dell'immagine durante lo scorrimento. Pertanto, prima di realizzare un'immagine come sfondo del sito, utilizza l'apposita proprietà background-attachment. I valori che accetta sono:

• scorrere;


• fisso.

Abbiamo bisogno dell'ultimo valore. Ora il nostro codice di esempio sarà simile a questo:

Sfondo struttura del sito Web

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

Questo volume non influisce in alcun modo sulla velocità di caricamento della pagina del browser con una connessione Internet ad alta velocità. Ma che dire di Internet mobile, quando lo si utilizza, il caricamento di diversi "contatori" richiederà molto tempo?