Agron Merseli

CSS utilizzo smart della proprietà Background-Position

| | Tip & Tricks, Web Development

Introduzione

In genere questa proprietà serve a muovere un'immagine di sfondo oppure una gradazione di colore all'interno del suo contenitore.

Esempio codice:

html {
  background-position: 100px 5px; 
}

Per maggiori informazioni riguardo questa proprietà rimando al link di W3Schools.

Come inserire più immagini in una pagina web con un solo file immagine

Nel mio caso l'ho utilizzato per muovere un immagine che contiene diverse icone alla stessa dimensione (32px x 32px), le ho allineate con Photoshop in modo da creare un rettangolo 3 x 4 icone con una dimensione totale di 96px x 128px con questo risultato finale.

A questo punto dentro l'HTML ho creato diversi div tanti quante le icone da mostrare, ho associato agli elementi div la classe .sw-item con questi parametri di stile.

.item-sw{
	width: 32px; 
	height: 32px; 
	margin: 10px 10px;
	display: inline-block; 
	background-repeat: no-repeat; 
	vertical-align: middle; 
	background-image: url('sw_96_128.png');
}

Notare come ogni elemento div è un blocco di altezza e larghezza fisse di 32px tanto quanto saranno le singole icone nel file immagine.

In ogni div mi sono mosso dando un attributo di stile in html in x e y della dimensione corretta per inquadrare l'icona interessata, l'origine x=0 e y=0 dell'immagine è nell'angolo in alto a sinistra.

Il codice HTML risulta scritto in questa maniera.

<!doctype html>

<html lang="en">
	<head>
  <meta charset="utf-8">

  <title>Test CSS Background-Position</title>
  <meta name="description" content="TestCSS Background-Position">
  <meta name="author" content="Agron Merseli">

	<style type="text/css">
		.item-sw{
			width: 32px; 
			height: 32px; 
			margin: 10px 10px;
			display: inline-block; 
			background-repeat: no-repeat; 
			vertical-align: middle; 
			background-image: url('sw_96_128.png');
		}
	</style>
</head>

<body>
	
	<div class="item-sw" style="background-position: 0 0;"></div>
	<div class="item-sw" style="background-position: -32px 0;"></div>
	<div class="item-sw" style="background-position: -64px 0;"></div>
	<br>
	<div class="item-sw" style="background-position: 0 -32px;"></div>
	<div class="item-sw" style="background-position: -32px -32px;"></div>
	<div class="item-sw" style="background-position: -64px -32px;"></div>
	<br>
	<div class="item-sw" style="background-position: 0 -64px;"></div>
	<div class="item-sw" style="background-position: -32px -64px;"></div>
	<div class="item-sw" style="background-position: -64px -64px;"></div>
	<br>
	<div class="item-sw" style="background-position: 0 -96px;"></div>
	<div class="item-sw" style="background-position: -32px -96px;"></div>
	<div class="item-sw" style="background-position: -64px -96px;"></div>

</body>
</html>

Il risultato finale dopo l'elaborazione del browser.

Conclusione

Il motivo principale per utilizzare questo metodo di accorpamento immagini l'ho trovato utile quando le icone da mostrare sono tante e della stessa dimensione e sono da mostrare in varie parti del sito. In questo modo il server non verrà appesantito da molteplici richieste per tutti i singoli file d'immagine e nella memoria cache verrà memorizzato un file unico d'immagine il quale velocizzerà l'apertura e la visualizzazione delle pagine web nel client.

Lascia un commento

Questo sito è protetto da reCAPTCHA, ed è soggetto alla Privacy Policy e ai Termini di utilizzo di Google.

Articoli recenti

Categorie

Google AdSense

Tag Cloud

Arduino Background-Position CLI css3 Electronics fundamental html lavalamp menu Notepad++ Plugin Posters Python Script

RSS Ansa.it – Tecnologia