{"id":123447,"date":"2025-03-03T08:19:01","date_gmt":"2025-03-03T06:19:01","guid":{"rendered":"https:\/\/elementor.com\/blog\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/"},"modified":"2026-01-09T22:35:19","modified_gmt":"2026-01-09T20:35:19","slug":"proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/","title":{"rendered":"Propriet\u00e0 CSS background-image: Come includere un’immagine di sfondo CSS"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In questa guida completa, ci immergeremo nel mondo delle immagini di sfondo CSS, esplorando tutto, dalle basi alle tecniche avanzate. Che tu sia uno sviluppatore web esperto o stia appena iniziando, scoprirai come:<\/span><\/p>\n

    \n
  1. Scegliere i formati di immagine giusti<\/span><\/li>\n
  2. Controllare la ripetizione e il tiling delle immagini<\/span><\/li>\n
  3. Padroneggiare il posizionamento preciso<\/span><\/li>\n
  4. Creare effetti fissi e parallasse<\/span><\/li>\n
  5. Sovrapporre pi\u00f9 immagini<\/span><\/li>\n
  6. Usare gradienti per sfondi dinamici<\/span><\/li>\n
  7. Ottimizzare le immagini per tempi di caricamento fulminei<\/span><\/li>\n<\/ol>\n

    Se sei pronto a elevare i tuoi design di siti web, tuffiamoci!<\/span><\/p>\n

    Le Basi delle Immagini di Sfondo CSS <\/span><\/h2>\n

    Iniziamo capendo i concetti e le propriet\u00e0 fondamentali che controllano come vengono visualizzate le immagini di sfondo.<\/span><\/p>\n

    La <\/span>background-image<\/span> Propriet\u00e0<\/span><\/h3>\n

    . Qui \u00e8 dove dici al browser quale file immagine usare come sfondo. Ecco la sintassi di base:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tCSS\r\nselector {\r\n  background-image: url('path\/to\/your\/image.jpg'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-635589b elementor-widget elementor-widget-text-editor\" data-id=\"635589b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Selettore<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Questo \u00e8 l&#8217;elemento HTML dove vuoi che appaia l&#8217;immagine di sfondo (ad esempio, <\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">, un <\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\"> specifico, ecc.).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">url()<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Questa funzione specifica la posizione dell&#8217;immagine. Il percorso pu\u00f2 essere:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relativo:<\/b><span style=\"font-weight: 400;\"> Relativo alla posizione del tuo file <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2026)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"33340\">CSS<\/a>.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Assoluto:<\/b><span style=\"font-weight: 400;\"> Un indirizzo web completo, incluso il protocollo (http:\/\/ o https:\/\/).<\/span><\/li>\n<\/ul>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3562e4 elementor-widget elementor-widget-code-highlight\" data-id=\"a3562e4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  background-image: url('\/images\/background.png'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44d855e elementor-widget elementor-widget-text-editor\" data-id=\"44d855e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota Importante:<\/b><span style=\"font-weight: 400;\"> Racchiudi sempre l&#8217;URL dell&#8217;immagine tra virgolette singole o doppie per garantire una corretta interpretazione del browser.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Formati di File<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I browser web supportano una variet\u00e0 di formati di immagine, ma i pi\u00f9 comuni per gli sfondi sono:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JPEG (o JPG): <\/b><span style=\"font-weight: 400;\">\u00e8 ottimo per fotografie o immagini con colori e gradienti complessi. Offre una buona compressione.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PNG:<\/b><span style=\"font-weight: 400;\"> Ottimo per immagini con trasparenza o quando hai bisogno di compressione senza perdita (loghi, grafiche).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>GIF:<\/b><span style=\"font-weight: 400;\"> Usato per semplici animazioni ma generalmente meno adatto per grandi immagini di sfondo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SVG:<\/b><span style=\"font-weight: 400;\"> Le Grafiche Vettoriali Scalabili sono ideali per icone, illustrazioni o pattern poich\u00e9 si scalano infinitamente senza perdita di qualit\u00e0.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>WebP: <\/b><span style=\"font-weight: 400;\">\u00e8 un formato moderno che offre compressione sia con perdita che senza perdita. Spesso \u00e8 superiore a JPEG e PNG in termini di dimensione del file, ma ha un supporto del browser meno universale.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">background-repeat<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La propriet\u00e0 <\/span><span style=\"font-weight: 400;\">background-repeat<\/span><span style=\"font-weight: 400;\"> detta come un&#8217;immagine di sfondo viene ripetuta o affiancata all&#8217;interno del suo elemento contenitore. Ecco i possibili valori:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si ripete sia orizzontalmente che verticalmente (comportamento predefinito).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-x<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si ripete solo orizzontalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>repeat-y<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si ripete solo verticalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>no-repeat<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine viene visualizzata una sola volta senza ripetizione.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>space<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine viene ripetuta e lo spazio extra viene distribuito uniformemente tra le immagini.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>round<\/b><b>:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine viene ripetuta quanto necessario per riempire lo spazio, ma le immagini vengono compresse o allungate per evitare tile parziali.<\/span><\/li>\n<\/ul>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d8a127 elementor-widget elementor-widget-code-highlight\" data-id=\"3d8a127\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('pattern.png');\r\n    background-repeat: repeat-y; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ca2ae elementor-widget elementor-widget-text-editor\" data-id=\"a5ca2ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Padroneggiare il Dimensionamento delle Immagini di Sfondo <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">La Propriet\u00e0 <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La propriet\u00e0 <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> controlla come un&#8217;immagine di sfondo viene scalata per adattarsi al suo contenitore. Ecco i valori pi\u00f9 comuni:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover<\/b><b>:<\/b><span style=\"font-weight: 400;\">  L&#8217;immagine viene scalata per coprire l&#8217;intero contenitore, mantenendo le sue proporzioni. Parti dell&#8217;immagine potrebbero essere tagliate per assicurare un riempimento completo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">contain<\/ci><ci id=\"gid_1\">:<\/ci><span style=\"font-weight: 400;\">  L&#8217;immagine viene scalata per adattarsi completamente all&#8217;interno del contenitore, mantenendo le sue proporzioni. Questo potrebbe lasciare dello spazio intorno all&#8217;immagine se le proporzioni del contenitore sono diverse.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">length<\/ci><ci id=\"gid_1\">:<\/ci><ci id=\"gid_2\"> Puoi specificare una larghezza e un&#8217;altezza esplicite (ad esempio, <\/ci><ci id=\"gid_3\">background-size: 200px 150px;<\/ci><ci id=\"gid_4\">).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">percentage<\/ci><ci id=\"gid_1\">:<\/ci><ci id=\"gid_2\"> Dimensiona l&#8217;immagine in relazione alla larghezza o all&#8217;altezza del suo contenitore (ad esempio, <\/ci><ci id=\"gid_3\">background-size: 50% auto;<\/ci><ci id=\"gid_4\">).<\/ci><\/li>\n<\/ul>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4984a1d elementor-widget elementor-widget-code-highlight\" data-id=\"4984a1d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n    background-image: url('landscape. jpg');\r\n    background-size: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-505d24b elementor-widget elementor-widget-text-editor\" data-id=\"505d24b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Immagini di sfondo responsive<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Nel web design moderno, la responsivit\u00e0 \u00e8 essenziale. Ecco come assicurarsi che le immagini di sfondo si adattino bene a diverse dimensioni dello schermo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Unit\u00e0 flessibili:<\/ci><ci id=\"gid_1\"> Usa <\/ci><ci id=\"gid_2\">percentuali<\/ci><ci id=\"gid_3\"> o unit\u00e0 di viewport (<\/ci><ci id=\"gid_4\">vw<\/ci><ci id=\"gid_5\">, <\/ci><ci id=\"gid_6\">vh<\/ci><ci id=\"gid_7\">) nella propriet\u00e0 <\/ci><ci id=\"gid_8\">background-size<\/ci><ci id=\"gid_9\"> per permettere all&#8217;immagine di scalare fluidamente.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Media Query:<\/ci><ci id=\"gid_1\"> Usa le media query CSS per applicare diversi valori di <\/ci><ci id=\"gid_2\">background-size<\/ci><ci id=\"gid_3\"> (o anche diverse immagini di sfondo) in base alle dimensioni dello schermo o all&#8217;orientamento del dispositivo.<\/ci><\/li>\n<\/ul>\n<p><b>Esempio (Media Query):<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab0edb8 elementor-widget elementor-widget-code-highlight\" data-id=\"ab0edb8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@media (max-width: 768px) {\r\n    body {\r\n        background-image: url('landscape-mobile.jpg'); \r\n        background-size: contain; \r\n    }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ab6941 elementor-widget elementor-widget-text-editor\" data-id=\"4ab6941\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Posizionamento preciso delle immagini di sfondo<\/span><\/h2>\n<h3><ci id=\"gid_0\">La propriet\u00e0 <\/ci><ci id=\"gid_1\">background-position<\/ci><\/h3>\n<p><ci id=\"gid_0\">La <\/ci><ci id=\"gid_1\">background-position<\/ci><span style=\"font-weight: 400;\">  ti d\u00e0 un controllo granulare su dove un&#8217;immagine di sfondo viene posizionata all&#8217;interno del suo contenitore. Accetta valori in vari formati:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Parole Chiave<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><ci id=\"gid_0\">top<\/ci><ci id=\"gid_1\">, <\/ci><ci id=\"gid_2\">bottom<\/ci><ci id=\"gid_3\">, <\/ci><ci id=\"gid_4\">left<\/ci><ci id=\"gid_5\">, <\/ci><ci id=\"gid_6\">right<\/ci><ci id=\"gid_7\">, <\/ci><ci id=\"gid_8\">center<\/ci><ci id=\"gid_9\"> (posiziona l&#8217;immagine rispetto ai bordi)<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><ci id=\"gid_0\">Sono consentite combinazioni (ad esempio, <\/ci><ci id=\"gid_1\">top right<\/ci><ci id=\"gid_2\">)<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Lunghezze<\/span><\/h4>\n<p><ci id=\"gid_0\">Valori in pixel (ad esempio, <\/ci><ci id=\"gid_1\">background-position: 20px 10px;<\/ci><ci id=\"gid_2\">) o unit\u00e0 di viewport per un posizionamento responsive.<\/ci><\/p>\n<h4><span style=\"font-weight: 400;\">Percentuali<\/span><\/h4>\n<p><ci id=\"gid_0\">Posiziona l&#8217;immagine come percentuale rispetto alla larghezza e altezza del contenitore (ad esempio, <\/ci><ci id=\"gid_1\">background-position: 30% 75%;<\/ci><ci id=\"gid_2\">)<\/ci><\/p>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a814e1e elementor-widget elementor-widget-code-highlight\" data-id=\"a814e1e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('texture.png');\r\n    background-position: center bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f42eb0d elementor-widget elementor-widget-text-editor\" data-id=\"f42eb0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Combinare le posizioni<\/span><\/h3>\n<p><ci id=\"gid_0\">Puoi combinare parole chiave, percentuali e valori in pixel nella propriet\u00e0 <\/ci><ci id=\"gid_1\">background-position<\/ci><ci id=\"gid_2\"> per creare un posizionamento dell&#8217;immagine complesso e preciso nel tuo design.<\/ci><\/p>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf161b9 elementor-widget elementor-widget-code-highlight\" data-id=\"bf161b9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('icon.png');\r\n    background-repeat: no-repeat;\r\n    background-position: right 20px bottom 10px; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e536de elementor-widget elementor-widget-text-editor\" data-id=\"0e536de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Questo posizioner\u00e0 un&#8217;icona a 20 pixel dal bordo destro e 10 pixel dal bordo inferiore dell&#8217;elemento contenitore.<\/span><\/p>\n<p><ci id=\"gid_0\">Importante:<\/ci><ci id=\"gid_1\"> Quando usi due valori, il primo valore rappresenta la posizione orizzontale e il secondo valore rappresenta la posizione verticale.<\/ci><\/p>\n<h2><span style=\"font-weight: 400;\">Sfondi fissi vs. scorrevoli <\/span><\/h2>\n<h3><ci id=\"gid_0\">La propriet\u00e0 <\/ci><ci id=\"gid_1\">background-attachment<\/ci><\/h3>\n<p><ci id=\"gid_0\">La <\/ci><ci id=\"gid_1\">background-attachment<\/ci><span style=\"font-weight: 400;\">  controlla come si comporta un&#8217;immagine di sfondo quando l&#8217;utente scorre la pagina. Ecco i principali valori:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">scroll<\/ci><ci id=\"gid_1\">:<\/ci><ci id=\"gid_2\"> L&#8217;immagine di sfondo scorre insieme al contenuto dell&#8217;elemento (questo \u00e8 il comportamento predefinito).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">fixed<\/ci><ci id=\"gid_1\">:<\/ci><ci id=\"gid_2\"> L&#8217;immagine di sfondo rimane fissa nella sua posizione rispetto al viewport, creando l&#8217;illusione che rimanga ferma mentre il contenuto scorre sopra di essa.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">local<\/ci><ci id=\"gid_1\"> L&#8217;immagine di sfondo scorre insieme al contenuto dell&#8217;elemento stesso, anche se quell&#8217;elemento ha un meccanismo di scorrimento.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">L&#8217;effetto parallasse<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lo scorrimento parallasse \u00e8 una tecnica popolare in cui le immagini di sfondo si muovono a una velocit\u00e0 inferiore rispetto al contenuto in primo piano, creando un&#8217;illusione di profondit\u00e0. Questo si ottiene usando background-attachment: fixed, insieme a un po&#8217; di JavaScript per regolare la posizione dell&#8217;immagine di sfondo in base al progresso dello scorrimento.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Considerazioni di Design<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Quando decidi tra sfondi fissi e scorrevoli, considera questi fattori:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Impatto visivo:<\/ci><ci id=\"gid_1\"> Gli sfondi fissi possono creare un effetto drammatico o immersivo, spesso usato nelle sezioni hero.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Leggibilit\u00e0:<\/ci><ci id=\"gid_1\"> Assicurati che qualsiasi testo sovrapposto a uno sfondo fisso abbia un contrasto sufficiente per rimanere leggibile.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance:<\/b><span style=\"font-weight: 400;\">  Gli sfondi fissi, specialmente quelli usati per effetti parallasse, possono avere un leggero impatto sulle prestazioni. Usali strategicamente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Esperienza Utente:<\/b><span style=\"font-weight: 400;\"> Evita di abusare degli sfondi fissi o del parallasse troppo complesso, perch\u00e9 possono distrarre o disorientare gli utenti su alcuni dispositivi.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Tecniche Avanzate per Immagini di Sfondo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Immagini di Sfondo Multiple<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il CSS ti permette di sovrapporre pi\u00f9 immagini di sfondo su un singolo elemento, creando effetti visivi ricchi con profondit\u00e0 e complessit\u00e0. Ecco come farlo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Valori <\/b><b>background-image<\/b><b> separati da virgole:<\/b><span style=\"font-weight: 400;\"> Elenca pi\u00f9 valori <\/span><span style=\"font-weight: 400;\"><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20509\">url<\/a>()<\/span><span style=\"font-weight: 400;\"> all&#8217;interno della propriet\u00e0 <\/span><span style=\"font-weight: 400;\">background-image<\/span><span style=\"font-weight: 400;\">, separati da virgole.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ordine di sovrapposizione:<\/b><span style=\"font-weight: 400;\"> La prima immagine nell&#8217;elenco \u00e8 lo strato pi\u00f9 in basso; le immagini successive sono sovrapposte sopra.<\/span><\/li>\n<\/ol>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb24e81 elementor-widget elementor-widget-code-highlight\" data-id=\"bb24e81\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('gradient.png'), url('texture.jpg'), url('logo.svg');\r\n    background-repeat: no-repeat, repeat, no-repeat;\r\n    background-position: center, 0 0, right bottom; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-303b04b elementor-widget elementor-widget-text-editor\" data-id=\"303b04b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Importante:<\/b><span style=\"font-weight: 400;\"> Puoi controllare <\/span><span style=\"font-weight: 400;\">background-repeat, background-position<\/span><span style=\"font-weight: 400;\"> e altre propriet\u00e0 per ogni immagine di sfondo individualmente fornendo elenchi separati da virgole anche per quelle propriet\u00e0.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Gradienti Lineari<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">I gradienti sono transizioni fluide tra due o pi\u00f9 colori. The  <\/span><span style=\"font-weight: 400;\">linear-gradient()<\/span><span style=\"font-weight: 400;\"> ti permette di creare gradienti lineari per effetti di sfondo dinamici.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintassi di Base<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">CSS<\/span><\/p>\n<p><span style=\"font-weight: 400;\">background-image: linear-gradient(direzione, color-stop1, color-stop2, &#8230;); <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>direzione<\/b><b>:<\/b><span style=\"font-weight: 400;\">  Imposta l&#8217;angolo del gradiente. Pu\u00f2 essere espressa con parole chiave (<\/span><span style=\"font-weight: 400;\">to top<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">to bottom right<\/span><span style=\"font-weight: 400;\">) o gradi numerici (ad esempio, <\/span><span style=\"font-weight: 400;\">45deg<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-stop<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Un colore e la sua posizione lungo la linea del gradiente (ad esempio, <\/span><span style=\"font-weight: 400;\">blue 0%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">red 50%<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">green 100%<\/span><span style=\"font-weight: 400;\">)<\/span><\/li>\n<\/ul>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2297ef elementor-widget elementor-widget-code-highlight\" data-id=\"e2297ef\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n   background-image: linear-gradient(to right, #f00 0%, #00f 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19bfbcd elementor-widget elementor-widget-text-editor\" data-id=\"19bfbcd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Gradienti Radiali<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I gradienti radiali creano una transizione di colore che si irradia da un punto centrale. Ecco come usare la funzione  <\/span><span style=\"font-weight: 400;\">radial-gradient()<\/span><span style=\"font-weight: 400;\"> in CSS:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintassi di Base<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a31c77 elementor-widget elementor-widget-code-highlight\" data-id=\"4a31c77\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f57d39d elementor-widget elementor-widget-text-editor\" data-id=\"f57d39d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Forma<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Definisce la forma del gradiente. Pu\u00f2 essere:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">ellipse<\/span><span style=\"font-weight: 400;\"> (predefinito)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">circle<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Dimensione<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Determina l&#8217;estensione del gradiente. Le opzioni includono:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">closest-side<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">farthest-side<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">closest-corner<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">farthest-corner<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Lunghezze o percentuali esplicite.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Posizione<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Imposta il punto centrale del gradiente. Usa una sintassi simile a  <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Color-stop<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uguale ai gradienti lineari.<\/span><\/p>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c26c518 elementor-widget elementor-widget-code-highlight\" data-id=\"c26c518\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: radial-gradient(circle at center, #ff0000 0%, #0000ff 60%, #000 100%); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9838c5 elementor-widget elementor-widget-text-editor\" data-id=\"a9838c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Consigli<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">I gradienti radiali possono partire da diverse posizioni all&#8217;interno del contenitore, non solo dal centro. Sperimenta con il valore  <\/span><span style=\"font-weight: 400;\">position<\/span><span style=\"font-weight: 400;\"> per effetti interessanti.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Come i loro equivalenti lineari, i gradienti radiali possono aggiungere un senso di profondit\u00e0 o focus visivo alle tue immagini di sfondo.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Trasparenza con RGBA e Opacit\u00e0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vediamo come puoi controllare la trasparenza e creare effetti di sfondo semi-trasparenti:<\/span><\/p>\n<p><b>Colori RGBA:<\/b><span style=\"font-weight: 400;\">  RGBA estende il modello di colore RGB aggiungendo un canale alpha (A), che controlla l&#8217;opacit\u00e0. I valori vanno da 0 (completamente trasparente) a 1 (completamente opaco).<\/span><\/p>\n<p><b>Esempio:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ae6538 elementor-widget elementor-widget-code-highlight\" data-id=\"2ae6538\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-color: rgba(255, 0, 0, 0.5); \/* Half-transparent red *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3884453 elementor-widget elementor-widget-text-editor\" data-id=\"3884453\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Propriet\u00e0 Opacity:<\/b><span style=\"font-weight: 400;\">  Questa propriet\u00e0 applica l&#8217;opacit\u00e0 a un intero elemento, inclusa la sua immagine di sfondo. I valori vanno da 0 a 1.<\/span><\/p>\n<p><b>Esempio:<\/b><b><br \/><\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-528c20f elementor-widget elementor-widget-code-highlight\" data-id=\"528c20f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nimg {\r\n    opacity: 0.8; \/* Makes the image 80% opaque *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27d1faf elementor-widget elementor-widget-text-editor\" data-id=\"27d1faf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Ottimizzazione delle Immagini di Sfondo per le Prestazioni <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Compressione delle immagini<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Comprimere le immagini riduce la loro dimensione del file senza sacrificare eccessivamente la qualit\u00e0. \u00c8 un equilibrio, ed ecco alcuni strumenti e approcci da considerare:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Strumenti di Ottimizzazione delle Immagini<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Servizi online:<\/b><span style=\"font-weight: 400;\"> TinyPNG, Squoosh, Kraken.io e molti altri offrono strumenti online.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Software:<\/b><span style=\"font-weight: 400;\"> Photoshop, GIMP o software dedicato all&#8217;ottimizzazione delle immagini come ImageOptim.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementor Image Optimizer:<\/b><span style=\"font-weight: 400;\"> Se prevedi di menzionare Elementor, introduci brevemente il suo strumento di ottimizzazione delle immagini integrato per un flusso di lavoro semplificato.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Compressione Lossy vs. Lossless<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lossy:<\/b><span style=\"font-weight: 400;\"> Riduce la dimensione del file in modo pi\u00f9 significativo scartando permanentemente alcuni dati dell&#8217;immagine (adatto per le foto; usa con giudizio).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Senza perdita:<\/b><span style=\"font-weight: 400;\"> Ottimizza la dimensione del file senza perdere qualit\u00e0 (ideale per grafiche e loghi).<\/span><\/li>\n<\/ul>\n<p><b>Trovare il punto giusto:<\/b><span style=\"font-weight: 400;\"> Sperimenta con diversi livelli di compressione per trovare il miglior compromesso tra dimensione del file e qualit\u00e0 visiva per le tue immagini di sfondo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Precaricamento<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il precaricamento suggerisce al browser che le immagini di sfondo sono importanti e dovrebbero essere caricate all&#8217;inizio del processo di caricamento della pagina. Ecco come implementarlo usando il tag HTML  <\/span><span style=\"font-weight: 400;\">&lt;link&gt;<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fc6a78 elementor-widget elementor-widget-code-highlight\" data-id=\"6fc6a78\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<link rel=\"preload\" as=\"image\" href=\"hero-image.jpg\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4650e89 elementor-widget elementor-widget-text-editor\" data-id=\"4650e89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><b>Ottimizza le immagini di sfondo per tempi di caricamento pi\u00f9 veloci<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Mentre le immagini di sfondo possono migliorare molto l&#8217;appeal visivo del tuo design, possono anche influenzare la velocit\u00e0 di caricamento della pagina se non ottimizzate. Usando un plugin  <\/span><a href=\"https:\/\/elementor.com\/products\/image-optimizer\"><span style=\"font-weight: 400;\">ottimizzatore di immagini<\/span><\/a><span style=\"font-weight: 400;\"> , puoi comprimere le immagini di sfondo per ridurre la loro dimensione senza sacrificare la qualit\u00e0. Questo rapido passaggio assicura che la tua pagina si carichi pi\u00f9 velocemente, migliorando l&#8217;esperienza utente e aiutando con il SEO. Per ottenere i migliori risultati, cerca sempre di usare immagini ottimizzate insieme a CSS efficiente per trovare il perfetto equilibrio tra estetica e prestazioni.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07e810a elementor-widget elementor-widget-text-editor\" data-id=\"07e810a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Immagini di sfondo e tendenze del web design <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Tendenze attuali<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il web design \u00e8 in continua evoluzione, e l&#8217;uso delle immagini di sfondo riflette naturalmente questi cambiamenti. Ecco alcune tendenze notevoli:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Immagini hero audaci:<\/b><span style=\"font-weight: 400;\">  Grandi immagini di sfondo di alta qualit\u00e0 nelle sezioni hero sono una costante. Impostano il mood del sito e catturano l&#8217;attenzione dei visitatori.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texture e gradienti: <\/b><span style=\"font-weight: 400;\"> Questi aggiungono profondit\u00e0 e interesse senza sopraffare il design complessivo. I gradienti offrono transizioni di colore morbide, mentre le texture portano una qualit\u00e0 tattile.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Illustrazioni come sfondi:<\/b><span style=\"font-weight: 400;\"> Le illustrazioni personalizzate offrono personalit\u00e0 e unicit\u00e0, specialmente quando abbinate a tipografie audaci.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sovrapposizioni con colore e opacit\u00e0:<\/b><span style=\"font-weight: 400;\"> Posizionare una sovrapposizione colorata con trasparenza su un&#8217;immagine di sfondo pu\u00f2 creare effetti visivi sorprendenti e migliorare la leggibilit\u00e0 del testo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Layout asimmetrici:<\/b><span style=\"font-weight: 400;\"> Le immagini di sfondo sono potenti strumenti per enfatizzare l&#8217;asimmetria nei design, creando una composizione pi\u00f9 dinamica e inaspettata.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Animazione e interazione:<\/b><span style=\"font-weight: 400;\"> Animazioni CSS o effetti hover sulle immagini di sfondo aggiungono un tocco di coinvolgimento e giocosit\u00e0.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Considerazioni sull&#8217;accessibilit\u00e0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ricorda, le tendenze di design non dovrebbero venire a costo dell&#8217;accessibilit\u00e0! Ecco i punti chiave da tenere a mente:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrasto:<\/b><span style=\"font-weight: 400;\"> Assicurati sempre che ci sia un contrasto di colore sufficiente tra qualsiasi testo sovrapposto alla tua immagine di sfondo e l&#8217;immagine stessa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Informazioni alternative:<\/b><span style=\"font-weight: 400;\"> Per immagini di sfondo che trasmettono contenuti importanti, offri alternative basate su testo o usa attributi ARIA per fornire descrizioni per gli screen reader.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sfondi affollati:<\/b><span style=\"font-weight: 400;\">  Le immagini complesse possono essere distraenti per alcuni utenti. In caso di dubbio, opta per uno sfondo pi\u00f9 semplice per dare priorit\u00e0 alla leggibilit\u00e0.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Facciamolo! Ecco alcune altre tecniche per migliorare il tuo gioco con le immagini di sfondo.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Oltre le basi <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Modalit\u00e0 di fusione dello sfondo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le modalit\u00e0 di fusione dello sfondo CSS determinano come un&#8217;immagine di sfondo interagisce con i colori o il contenuto esistenti dietro di essa. Questo apre una vasta gamma di possibilit\u00e0 creative. Alcune delle modalit\u00e0 di fusione pi\u00f9 comuni includono:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>multiply<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Scurisce il risultato moltiplicando i colori di sfondo e di primo piano.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>screen<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Schiarisce il risultato invertendo, moltiplicando e invertendo di nuovo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>overlay<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Combina multiply e screen per un effetto di contrasto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-dodge<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Schiarisce lo sfondo in base al colore di primo piano.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color-burn<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Scurisce lo sfondo in base al colore di primo piano.<\/span><\/li>\n<\/ul>\n<p><b>Esempio:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fe95c6 elementor-widget elementor-widget-code-highlight\" data-id=\"6fe95c6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\ndiv {\r\n    background-image: url('image.jpg');\r\n    background-blend-mode: multiply; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de314b7 elementor-widget elementor-widget-text-editor\" data-id=\"de314b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Consigli<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sperimenta con diverse modalit\u00e0 di fusione per ottenere effetti visivi unici.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Le modalit\u00e0 di fusione funzionano meglio quando l&#8217;immagine di sfondo ha aree di trasparenza.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fai attenzione alla leggibilit\u00e0 di qualsiasi testo posizionato sopra immagini con modalit\u00e0 di fusione applicate.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Immagini di sfondo con animazioni e transizioni CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Aggiungere animazioni o transizioni CSS ti permette di creare immagini di sfondo dinamiche che cambiano nel tempo. Ecco alcune idee:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Effetti al passaggio del mouse:<\/b><span style=\"font-weight: 400;\"> Cambia il <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\"> o applica filtri quando passi il mouse su un elemento con un&#8217;immagine di sfondo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Effetto Ken Burns:<\/b><span style=\"font-weight: 400;\"> Simula l&#8217;effetto di panoramica e zoom tipico dei documentari cambiando lentamente <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gradienti animati:<\/b><span style=\"font-weight: 400;\"> Passa attraverso i punti di colore in un gradiente usando animazioni CSS per un effetto di transizione ipnotico.<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\">  Usa le animazioni con gusto! Le animazioni troppo distraenti possono avere un impatto negativo sull&#8217;esperienza dell&#8217;utente.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Immagini di sfondo come sprite<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Tradizionalmente, uno sprite di immagini combina pi\u00f9 immagini piccole in un unico file, migliorando le prestazioni riducendo le richieste HTTP. La stessa tecnica pu\u00f2 essere applicata alle immagini di sfondo! Ecco come funziona:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Combina le immagini:<\/b><span style=\"font-weight: 400;\"> Crea un foglio di sprite contenente tutte le tue piccole immagini di sfondo (ad esempio, icone).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Usa background-position:<\/b><span style=\"font-weight: 400;\"> Posiziona con precisione ogni icona all&#8217;interno dell&#8217;elemento contenitore usando <\/span><span style=\"font-weight: 400;\">background-position<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ol>\n<p><b>Quando usarlo:<\/b><span style=\"font-weight: 400;\"> \u00c8 utile quando lavori con molte piccole icone che vengono usate frequentemente in tutto il sito.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusione<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Le immagini di sfondo, se usate con attenzione, possono trasformare l&#8217;aspetto, la sensazione e l&#8217;esperienza complessiva dell&#8217;utente di un sito web. Comprendendo le propriet\u00e0 CSS di base, esplorando tecniche avanzate e dando priorit\u00e0 all&#8217;ottimizzazione, puoi creare elementi visivi straordinari che non compromettono le prestazioni.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ricorda questi punti chiave:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In base al contenuto delle tue immagini, scegli i formati immagine giusti (JPEG, PNG, GIF, SVG, WebP).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Controlla la ripetizione, il dimensionamento e il posizionamento delle immagini con precisione.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sperimenta con sfondi fissi vs. scorrevoli per effetti di design unici.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sovrapponi immagini, usa gradienti e controlla la trasparenza per una profondit\u00e0 creativa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ottimizza, precarica e potenzialmente carica le immagini in modo lazy per garantire tempi di caricamento rapidissimi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rimani aggiornato sulle tendenze attuali del web design e le linee guida per l&#8217;accessibilit\u00e0.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Strumenti come Elementor possono semplificare notevolmente la gestione delle immagini di sfondo, permettendoti di concentrarti sulla tua visione del design mentre le ottimizzazioni delle prestazioni vengono gestite dietro le quinte.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Che tu sia uno sviluppatore web esperto o stia solo iniziando, le immagini di sfondo sono uno strumento essenziale nel tuo kit di strumenti per il web design. Non aver paura di sperimentare e spingere i limiti di ci\u00f2 che \u00e8 possibile!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Le immagini di sfondo hanno il potere di trasformare l&#8217;aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l&#8217;occhio dell&#8217;utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.<\/p>\n","protected":false},"author":2024234,"featured_media":120139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[518],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Propriet\u00e0 CSS background-image: Come includere un&#039;immagine di sfondo CSS<\/title>\n<meta name=\"description\" content=\"Le immagini di sfondo hanno il potere di trasformare l&#039;aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l&#039;occhio dell&#039;utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Propriet\u00e0 CSS background-image: Come includere un&#039;immagine di sfondo CSS\" \/>\n<meta property=\"og:description\" content=\"Le immagini di sfondo hanno il potere di trasformare l&#039;aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l&#039;occhio dell&#039;utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:19:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T20:35:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Propriet\u00e0 CSS background-image: Come includere un&#8217;immagine di sfondo CSS\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2026-01-09T20:35:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\"},\"wordCount\":2505,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Risorse\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\",\"name\":\"Propriet\u00e0 CSS background-image: Come includere un'immagine di sfondo CSS\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:19:01+00:00\",\"dateModified\":\"2026-01-09T20:35:19+00:00\",\"description\":\"Le immagini di sfondo hanno il potere di trasformare l'aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l'occhio dell'utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Risorse\",\"item\":\"https:\/\/elementor.com\/blog\/it\/category\/risorse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Propriet\u00e0 CSS background-image: Come includere un&#8217;immagine di sfondo CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Propriet\u00e0 CSS background-image: Come includere un'immagine di sfondo CSS","description":"Le immagini di sfondo hanno il potere di trasformare l'aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l'occhio dell'utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/","og_locale":"it_IT","og_type":"article","og_title":"Propriet\u00e0 CSS background-image: Come includere un'immagine di sfondo CSS","og_description":"Le immagini di sfondo hanno il potere di trasformare l'aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l'occhio dell'utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.","og_url":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:19:01+00:00","article_modified_time":"2026-01-09T20:35:19+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Scritto da":"Itamar Haim","Tempo di lettura stimato":"13 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Propriet\u00e0 CSS background-image: Come includere un&#8217;immagine di sfondo CSS","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2026-01-09T20:35:19+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/"},"wordCount":2505,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Risorse"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/","url":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/","name":"Propriet\u00e0 CSS background-image: Come includere un'immagine di sfondo CSS","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:19:01+00:00","dateModified":"2026-01-09T20:35:19+00:00","description":"Le immagini di sfondo hanno il potere di trasformare l'aspetto e la sensazione di qualsiasi sito web. Dalle texture alle immagini hero audaci, aggiungono profondit\u00e0 visiva, impostano il tono e guidano l'occhio dell'utente attraverso la pagina. Il CSS (Cascading Style Sheets) fornisce una ricchezza di strumenti per personalizzare le immagini di sfondo, dandoti un incredibile controllo sul loro aspetto e comportamento.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/it\/"},{"@type":"ListItem","position":2,"name":"Risorse","item":"https:\/\/elementor.com\/blog\/it\/category\/risorse\/"},{"@type":"ListItem","position":3,"name":"Propriet\u00e0 CSS background-image: Come includere un&#8217;immagine di sfondo CSS"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/it\/#website","url":"https:\/\/elementor.com\/blog\/it\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=123447"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123447\/revisions"}],"predecessor-version":[{"id":150144,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123447\/revisions\/150144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media\/120139"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=123447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=123447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=123447"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_persona?post=123447"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_intent?post=123447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}