Quasi tutti i siti popolari hanno un bell'aspetto. Nella progettazione di siti Web, una parte importante è lo sfondo, chiamato anche sfondo, che ognuno di noi può creare o modificare. In questo articolo ti dirò come mettere uno sfondo al sito.

Creare un nuovo sfondo per i siti web

Per completare l'attività, puoi utilizzare uno dei 4 metodi:

• 1. Sfondo con un colore
• 2. Sfondo con trama
• 3. Sfondo con sfumatura
• 4. Sfondo con immagine grande

Crea uno sfondo con un colore

Per creare o modificare lo sfondo del sito, che consiste in un colore, è necessario accedere al file style.css, in cui trovare il valore - body (è responsabile del corpo principale del sito). Ora devi scrivere la funzione background-color se non c'era e specificare il codice colore. Nel caso in cui dovessi creare uno sfondo bianco per il sito, dovrai scrivere il seguente codice:

colore di sfondo: #83C5E9 ; (sfondo blu, come nell'esempio)

Puoi trovare un elenco completo dei colori sul sito Web - (STM). Per cambiare il colore, cambia il valore dopo i due punti e goditi il ​​tuo lavoro.

Creazione di uno sfondo con una trama

Questo metodo è particolarmente popolare ultimamente, in quanto ti consente di creare un bellissimo sfondo per il sito. Le trame possono essere semplici ma molto belle, motivo per cui vengono spesso utilizzate. Per connettere qualsiasi texture, deve essere caricata nella cartella delle immagini sull'hosting in cui è installato il tuo sito. Successivamente, dovresti scrivere il seguente codice:

colore di sfondo: #537759;

immagine di sfondo: url(images/pattern.png);

In questo codice, c'è un parametro familiare per mantenere il colore (è il verde) e un elemento che è responsabile del collegamento della trama verde.

Realizzare lo sfondo con una sfumatura

Qualsiasi immagine collegata tramite funzioni CSS può essere ripetuta sia orizzontalmente che verticalmente (lungo gli assi X e Y). Questa funzione ci consente di creare qualsiasi semplice sfondo per il sito con le nostre mani. Per fare ciò, devi creare un gradiente largo 1 megapixel (vedi immagine sotto), salvarlo come immagine e caricarlo sull'hosting. Successivamente, puoi scrivere il codice necessario, ovvero:

colore di sfondo: #83C5E9;

immagine di sfondo: url(images/gradient.jpg);

ripetizione in background: ripetizione-x;

In questo set, in ordine di priorità, è presente una funzione responsabile del colore di sfondo che utilizziamo per la riassicurazione. Successivamente, il parametro, che è responsabile del collegamento del gradiente, e, infine, la funzione, che è responsabile della ripetizione del gradiente lungo l'asse X.

Utilizzo di un'immagine grande per lo sfondo del sito

Questo metodo è il secondo più popolare, poiché consente di utilizzare immagini diverse per creare uno sfondo. Per implementare questo metodo, devi solo caricare un'immagine di grandi dimensioni nella cartella delle immagini del sito e scrivere il seguente codice:

colore di sfondo: #000000;

immagine di sfondo: url(immagini/titolo immagine.jpg);

posizione di sfondo: centro in alto;

background-repeat: no-repeat;

Se tutto è chiaro con i primi due parametri, è necessario evidenziare gli ultimi due. La terza funzione consente di fissare l'immagine al centro del sito e l'ultimo parametro ne blocca la ripetizione in tutta la struttura della pagina.

Modifica dello sfondo sui siti Web ucoz

Questi metodi per creare uno sfondo per un sito possono essere utilizzati su diversi sistemi di gestione dei contenuti, ma non sui siti: ucoz. Per cambiare lo sfondo del sito ucoz, devi andare al pannello di controllo del sito, vai a "Gestione del design", e poi dentro "Modifica dei modelli".

Ora devi aprire il foglio di stile (CSS), trovare la linea corpo e parametro sfondo. Dopodiché, devi copiare il link, incollarlo nel browser Internet e avrai accesso all'immagine che faceva da sfondo.

Per utilizzare il nuovo sfondo, devi solo caricarlo nel File Manager. Allo stesso tempo, assicurati che il nome della nuova immagine per lo sfondo sia lo stesso di prima della modifica. Salva il tuo lavoro e vai al sito per visualizzare il lavoro svolto.

Cambia lo sfondo del sito in HTML

Se vuoi creare uno sfondo su un sito html usando un'immagine, inserisci semplicemente la riga nel codice:

E se vuoi creare lo sfondo del sito usando il colore, la linea dovrebbe apparire così:

Questo conclude la nostra storia. Ora sai come creare uno sfondo per un sito web. Progetti di successo!

Trepachev DP 2012-2020

Agli studenti: ho ferie fino al 6 gennaio, durante le vacanze risponderò il più possibile,
a volte posso scomparire per un paio di giorni

Codifica JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Core Tutorial Riferimento HTML Riferimento CSS Tutorial OOP e MVC Tutorial video Riferimento Tutorial Master Tutorial video Tutorial Core Tutorial Core Tutorial Admin Tutorial Developer Tutorial AJAX+PHP

proprietà di sfondo-allegato

Proprietà sfondo-allegato imposta come scorrere l'immagine di sfondo dell'elemento: insieme al testo o al testo scorrerà sull'immagine.

Sintassi

Selettore ( sfondo-allegato: fisso | scroll | locale; )

I valori

Valore predefinito: scorrere.

Esempio. Che cosa è scorrere

Ora proprietà sfondo-allegato impostato scorrere. Scorri l'elemento verticalmente: vedrai scorrere il testo insieme allo sfondo:

body ( allegato sfondo: scroll; immagine di sfondo: url("bg.png"); ) #elem ( larghezza: 400px; margine: 0 auto; allineamento testo: giustifica; peso carattere: grassetto; dimensione carattere: 20px; )

Esempio. Che cosa è scorrere

E ora la proprietà sfondo-allegato impostato fisso. Scorri l'elemento verticalmente: vedrai il testo scorrere sullo sfondo:

body ( sfondo-allegato: fisso; sfondo-immagine: url("bg.png"); ) #elem ( larghezza: 400px; margine: 0 auto; allineamento testo: giustifica; peso carattere: grassetto; dimensione carattere: 20px; )

Per impostazione predefinita, quando si scorre una pagina Web con uno sfondo, lo sfondo scorre insieme ad altri elementi. A volte questo è appropriato ea volte si desidera che l'immagine impostata tramite l'immagine di sfondo rimanga sempre visibile. Per controllare questo stato, esiste una proprietà background-attachment.

valori di attaccamento di sfondo

La proprietà può assumere tre valori per personalizzare il comportamento dello sfondo:

• scroll (predefinito) - L'immagine di sfondo si sposta con altri elementi quando si scorre la pagina web.
• fisso - il valore corregge l'immagine di sfondo, rendendola insensibile allo scorrimento. Mentre scorri la pagina, lo sfondo sullo sfondo rimarrà fisso.
• local - questo valore è stato aggiunto perché nel caso di una pergamena locale, lo sfondo con il valore scorrere Comportarsi come fisso. Con un valore Locale lo sfondo scorre con il contenuto dell'elemento e non scorre se il contenuto non scorre (ma scorre con l'elemento stesso).

Per una migliore comprensione di come funziona la proprietà, dai un'occhiata agli esempi seguenti. Per il confronto, i valori degli allegati in background sono tutti e tre (si spera che tu stia utilizzando un browser desktop moderno quando impari i CSS!).

sfondo-allegato: scorrere

sfondo-allegato: fisso

allegato di sfondo: locale

Supporto del browser

Il supporto completo per tutti i valori della proprietà background-attachment è disponibile per i browser desktop IE9+, Edge 12+, Firefox 25+, Chrome (tutte le versioni), Safari 5+, Opera 11.5+. Dai browser mobili, Opera Mobile, Firefox per Android, IE Mobile e QQ Browser comprendono tutti i valori. In altri browser, il supporto è parziale o inesistente.

Più avanti nel tutorial: background-origin e background-clip per posizionare le immagini di sfondo e controllare il ritaglio.

Questa breve lezione tratterà di come creare un bellissimo sfondo fisso sul tuo sito (o su un pager) che scorrerà senza intoppi da un'immagine all'altra quando l'utente scorre la pagina. CSS ha un background-attachment: fixed proprietà che ti permette di correggere un'immagine di sfondo. Cioè, quando si scorre la pagina, non scorrerà con la pagina. Ma non c'è alcuna proprietà nei CSS che ci permetta di cambiare le immagini durante lo scroll, quindi useremo Javascript.

Sfondo fisso per il sito

Potresti non capire di cosa sto scrivendo, quindi guarda la demo e vedrai questo bellissimo effetto di persona:

Scaricamento

Come modificare lo sfondo del sito?

HTML

Inizieremo definendo la struttura HTML della pagina per la quale stiamo facendo questo effetto:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="cbp-fbscroller" class="cbp-fbscroller">

In etichetta