Per impostazione predefinita, su una pagina Web, un'immagine appare nell'angolo in alto a sinistra dello schermo e viene ripetuta in orizzontale e verticalmente. Tuttavia, per cambiare la sua posizione attuale, CSS offre un "posizione in background"Proprietà che specifica la posizione dell'immagine di sfondo, come il centro.

In questo articolo, impareremo come impostare la posizione di un'immagine di sfondo con l'aiuto di esempi. Per fare ciò, in primo luogo, dimostreremo la procedura di aggiungere un'immagine come sfondo in CSS.

Aggiungi immagini di sfondo utilizzando la proprietà "Immagina di sfondo"

Per l'aggiunta di immagini sullo sfondo, il "immagine di sfondo"La proprietà viene utilizzata.

Sintassi

Di seguito è riportata la sintassi per impostare un'immagine di sfondo su un elemento HTML:

Image background: url ();

Qui, "url ()"Specifica il percorso del nome dell'immagine o dell'immagine in cui esiste.

Ora, passa all'esempio pratico dell'uso della proprietà dell'immagine di background.

Esempio: inserire un'immagine di sfondo usando CSS

In questo esempio, creeremo un

elemento e sfondo verranno aggiunti dietro questo elemento. Puoi aggiungere elementi in base alla tua scelta e applicare la proprietà dell'immagine di background:

Linuxhint

Dopodiché, spostati al CSS, usa il “immagine di sfondo"Proprietà, assegna il percorso o il nome dell'immagine in AS"url ()"Valore della proprietà dell'immagine in background:

corpo
Immagina di background: URL ("IMG.jpg ");

Questo darà il seguente risultato:

Ecco come è possibile aggiungere un'immagine di sfondo in CSS.

Come centrare le immagini di sfondo utilizzando la proprietà CSS "posizione di sfondo"?

IL "posizione in background"La proprietà imposta la posizione dell'immagine di sfondo. La sintassi sarà la seguente:

Posizione di background: valore

La posizione dell'immagine può essere specificata come assoluta, sinistra o destra. Più specificamente, impostando il "centro"Valore centrerà l'immagine di sfondo aggiunta.

Ora, passiamo all'esempio pratico che dimostra come utilizzare le proprietà di immagine di background e posizioni di fondo in CSS.

Esempio: come impostare l'immagine di sfondo al centro?

Imposteremo il colore di sfondo e il percorso dell'immagine con "sfondo" proprietà. Successivamente, utilizzeremo il "posizione in background"Proprietà per impostare l'immagine di sfondo al centro. Infine, imposteremo il "Ripeat di sfondo"Proprietà a No-Ripeat per non ripetere l'immagine:

corpo
Sfondo: RGB (128, 44, 12) URL ("Immagine.jpg ") fisso;
Posizione di background: centro;
Ripeat background: no-ripetizione;

Una volta fatto tutto, eseguire il codice e diamo un'occhiata al risultato finale:

La nostra immagine di sfondo è posizionata correttamente al centro della pagina.

Conclusione

Le immagini di sfondo possono essere aggiunte utilizzando la proprietà dell'immagine di sfondo, mentre la posizione di sfondo può essere impostata utilizzando la proprietà in posizione sfondo. Al centro, l'immagine di sfondo in CSS imposta il valore della proprietà di posizionamento in background su “centro". L'articolo spiega in dettaglio come aggiungere un'immagine allo sfondo usando "immagine di sfondo"E come impostare la sua posizione usando il"posizione in background" proprietà.