{"id":1332,"date":"2020-03-19T19:52:00","date_gmt":"2020-03-19T18:52:00","guid":{"rendered":"https:\/\/merseli.com\/?p=1332"},"modified":"2020-06-03T11:01:40","modified_gmt":"2020-06-03T09:01:40","slug":"css-smart-use-of-the-background-position-property","status":"publish","type":"post","link":"https:\/\/merseli.com\/it\/2020\/03\/19\/css-smart-use-of-the-background-position-property\/","title":{"rendered":"CSS utilizzo smart della propriet\u00e0 Background-Position"},"content":{"rendered":"

Introduzione<\/h3>\n\n\n\n

In genere questa propriet\u00e0 serve a muovere un'immagine di sfondo oppure una gradazione di colore all'interno del suo contenitore.<\/p>\n\n\n\n

Esempio codice:<\/p>\n\n\n

\nhtml {\n  background-position: 100px 5px; \n}\n<\/pre><\/div>\n\n\n
Per maggiori informazioni riguardo questa propriet\u00e0 rimando al link di W3Schools<\/a>.<\/p>\n\n\n\n
Come inserire pi\u00f9 immagini in una pagina web con un solo file immagine<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
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.<\/p>\n\n\n
\n.item-sw{\n\twidth: 32px; \n\theight: 32px; \n\tmargin: 10px 10px;\n\tdisplay: inline-block; \n\tbackground-repeat: no-repeat; \n\tvertical-align: middle; \n\tbackground-image: url('sw_96_128.png');\n}\n<\/pre><\/div>\n\n\n
Notare come ogni elemento div \u00e8 un blocco di altezza e larghezza fisse di 32px tanto quanto saranno le singole icone nel file immagine.<\/p>\n\n\n\n
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 \u00e8 nell'angolo in alto a sinistra.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Il codice HTML risulta scritto in questa maniera.<\/p>\n\n\n
\n<!doctype html>\n\n<html lang="en">\n\t<head>\n  <meta charset="utf-8">\n\n  <title>Test CSS Background-Position<\/title>\n  <meta name="description" content="TestCSS Background-Position">\n  <meta name="author" content="Agron Merseli">\n\n\t<style type="text\/css">\n\t\t.item-sw{\n\t\t\twidth: 32px; \n\t\t\theight: 32px; \n\t\t\tmargin: 10px 10px;\n\t\t\tdisplay: inline-block; \n\t\t\tbackground-repeat: no-repeat; \n\t\t\tvertical-align: middle; \n\t\t\tbackground-image: url('sw_96_128.png');\n\t\t}\n\t<\/style>\n<\/head>\n\n<body>\n\t\n\t<div class="item-sw" style="background-position: 0 0;"><\/div>\n\t<div class="item-sw" style="background-position: -32px 0;"><\/div>\n\t<div class="item-sw" style="background-position: -64px 0;"><\/div>\n\t<br>\n\t<div class="item-sw" style="background-position: 0 -32px;"><\/div>\n\t<div class="item-sw" style="background-position: -32px -32px;"><\/div>\n\t<div class="item-sw" style="background-position: -64px -32px;"><\/div>\n\t<br>\n\t<div class="item-sw" style="background-position: 0 -64px;"><\/div>\n\t<div class="item-sw" style="background-position: -32px -64px;"><\/div>\n\t<div class="item-sw" style="background-position: -64px -64px;"><\/div>\n\t<br>\n\t<div class="item-sw" style="background-position: 0 -96px;"><\/div>\n\t<div class="item-sw" style="background-position: -32px -96px;"><\/div>\n\t<div class="item-sw" style="background-position: -64px -96px;"><\/div>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Il risultato finale dopo l'elaborazione del browser.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Conclusione<\/h3>\n\n\n\n
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\u00e0 appesantito da molteplici richieste per tutti i singoli file d'immagine e nella memoria cache verr\u00e0 memorizzato un file unico d'immagine il quale velocizzer\u00e0 l'apertura e la visualizzazione delle pagine web nel client.<\/p>","protected":false},"excerpt":{"rendered":"
Introduction Generally this property is used to move a background image or a gradation of color inside its container. Code example: html { background-position: 100px 5px; } For more information about this property, refer to the link of W3Schools. How to insert multiple images into a web page with a single image file using the […]<\/p>\n","protected":false},"author":1,"featured_media":1336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_vp_format_video_url":"","_vp_image_focal_point":[],"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[35,39],"tags":[40,10,41],"class_list":["post-1332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tip-tricks","category-web-development","tag-background-position","tag-css3","tag-html"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/merseli.com\/wp-content\/uploads\/2020\/03\/HTML5-CSS3.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/posts\/1332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/comments?post=1332"}],"version-history":[{"count":3,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/posts\/1332\/revisions"}],"predecessor-version":[{"id":1341,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/posts\/1332\/revisions\/1341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/media\/1336"}],"wp:attachment":[{"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/media?parent=1332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/categories?post=1332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/merseli.com\/it\/wp-json\/wp\/v2\/tags?post=1332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}