{"id":263,"date":"2020-03-17T10:06:22","date_gmt":"2020-03-17T08:06:22","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=263"},"modified":"2026-02-26T15:54:21","modified_gmt":"2026-02-26T13:54:21","slug":"how-to-change-background-image","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-change-background-image\/","title":{"rendered":"How to configure and optimize background images in Elementor"},"content":{"rendered":"\n<p>To configure background images in Elementor, select your container or section and navigate to the <strong>Style<\/strong> tab. Under the <strong>Background<\/strong> section, click the <strong>Classic<\/strong> icon to upload an image from the <strong>Media Library<\/strong>. Use the <strong>Cover<\/strong> setting to fill the container or <strong>Contain<\/strong> to ensure the entire image remains visible without cropping.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do I access background settings in Elementor?<\/h2>\n\n\n\n<p>To begin editing your background visuals, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the handle of the specific container, you wish to edit.<\/li>\n\n\n\n<li>Click the <strong>Style<\/strong> tab within the left-hand panel.<br><img decoding=\"async\" width=\"180\" height=\"272\" class=\"wp-image-164687\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\" alt=\"The container's style tab\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png 566w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background-198x300.png 198w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><br>[callout type=&#8221;note]Adding backgrounds to widgets is done using the <strong>Background<\/strong> section of the <strong>Advanced<\/strong> tab.[\/callout]<\/li>\n\n\n\n<li>Locate the <strong>Background<\/strong> section and click the <strong>Classic<\/strong> (paintbrush) icon.<br><img decoding=\"async\" width=\"180\" height=\"220\" class=\"wp-image-164694\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Select-classic-background.png\" alt=\"The Elementor Style tab highlighting the Background section with the Classic paintbrush icon selected and the image upload placeholder\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Select-classic-background.png 560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Select-classic-background-246x300.png 246w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Click the image placeholder to launch the <strong>Media Library<\/strong> and select your desired file.=<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">What is the difference between cover and contain display sizes?<\/h2>\n\n\n\n<p>The <strong>Display Size<\/strong> setting controls how the image interacts with the container&#8217;s boundaries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cover<\/strong>: This scales the image to fill the entire container area. If aspect ratios differ, Elementor will crop the edges to ensure no empty space is visible. It is most suitable for: Full-width backgrounds, hero banners, and decorative sections where complete coverage is more important than showing every detail of the image.<\/li>\n\n\n\n<li><strong>Contain<\/strong>: This scales the image so the entire file is visible within the container. This prevents cropping but may result in &#8220;letterboxing&#8221; or empty space around the image. It is most suitable for: Logos, specific graphics, or patterns where you need the full image to be visible without any cropping.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"728\" class=\"wp-image-164701\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain.png\" alt=\"A comparison in the Elementor editor showing the visual difference between the Cover and Contain Display Size settings\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain.png 1948w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain-280x300.png 280w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain-956x1024.png 956w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain-768x822.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain-1434x1536.png 1434w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/cover-v-contain-1913x2048.png 1913w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How do I adjust the background position and attachment?<\/h2>\n\n\n\n<p>You can refine the focal point and behavior of your image using these settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position<\/strong>: This dictates from which point the image scales. For &#8220;Cover&#8221; images, <strong>Center Center<\/strong> is usually the safest bet to keep the subject visible. If your subject is at the top of the photo, choose <strong>Top Center<\/strong>.<\/li>\n\n\n\n<li><strong>Attachment<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Scroll<\/strong>: The background moves with the page as the user scrolls (default behavior).<\/li>\n\n\n\n<li><strong>Fixed<\/strong>: The background stays in place while the content scrolls over it, creating a parallax-like effect. <em>Note: Fixed backgrounds may be disabled on some mobile devices to prevent performance issues.<\/em><br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"619\" class=\"wp-image-164708\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/positiona-ndattachment.png\" alt=\"The position and attachment settings\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/positiona-ndattachment.png 566w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/positiona-ndattachment-136x300.png 136w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/positiona-ndattachment-463x1024.png 463w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How do I configure a background overlay in Elementor?<\/h2>\n\n\n\n<p>A <strong>Background Overlay<\/strong> sits between your image and your widgets to improve text contrast. To add an overlay, open the Background Overlay section and select a type of overlay.<\/p>\n\n\n\n<p>There are two main reasons to use an overlay:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Readability<\/strong>: Dark overlays make white text legible against complex photographic backgrounds.<\/li>\n\n\n\n<li><strong>Branding<\/strong>: Use the <strong>Color Picker<\/strong> to apply brand-specific tints without modifying the original image file.<\/li>\n<\/ul>\n\n\n\n<p><strong>To add an overlay<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the <strong>Style<\/strong> tab, open the <strong>Background Overlay<\/strong> section.<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"236\" class=\"wp-image-164715\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Open-background-overlay.png\" alt=\"Click Background overlay to add the overlay\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Open-background-overlay.png 568w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Open-background-overlay-228x300.png 228w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><\/li>\n\n\n\n<li>Choose Type: Select <strong>Classic<\/strong> (for a solid color or second image) or <strong>Gradient<\/strong> (to fade between colors).<br><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"89\" class=\"wp-image-164722\" style=\"width: 180px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Choose-a-background-type.png\" alt=\"Select a background type\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Choose-a-background-type.png 560w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/Choose-a-background-type-300x148.png 300w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><br>You can choose either an image or a color for the background. For details, see <a href=\"https:\/\/elementor.com\/help\/use-the-color-picker\/\">Use the color picker<\/a>. <\/li>\n\n\n\n<li><strong>Set Color and Opacity<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Pick a color (e.g., black #000000).<\/li>\n\n\n\n<li>Adjust the <strong>Opacity<\/strong> slider. A value between <strong>0.3<\/strong> and <strong>0.5<\/strong> is typically perfect for making text pop without obscuring the image.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"389\" class=\"wp-image-164729\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/setting-opacity.gif\" alt=\"The opacity slider setting the opacity\"><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Blend Modes<\/strong>: For advanced styling, experiment with <strong>Blend Modes<\/strong> (like Multiply, Screen, or Overlay) to change how the overlay color interacts with the image pixels. For details, see <a href=\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\">Blend Mode and CSS Filters<\/a>.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are the best practices for background performance?<\/h2>\n\n\n\n<p>To maintain fast loading speeds, follow these optimization standards:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compress Files<\/strong>: Always use image compression tools before uploading to reduce total page weight.<\/li>\n\n\n\n<li><strong>WebP Format<\/strong>: Utilize the modern <strong>WebP<\/strong> format to achieve high visual quality at significantly smaller file sizes.<\/li>\n\n\n\n<li><strong>Clean Media Library<\/strong>: Delete any unused background variations from the <strong>Media Library<\/strong> to save server storage.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How do I troubleshoot background display issues?<\/h2>\n\n\n\n<p>If your background does not appear correctly, follow these troubleshooting steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clear your browser and site cache. See <a href=\"https:\/\/elementor.com\/help\/common-troubleshooting-steps\/#cache\">here<\/a> for clearing your browser cache. Clearing the site cache is done from WP Admin. <\/li>\n\n\n\n<li>Check <strong>Responsive Mode<\/strong> to make sure you&#8217;re optimizing the background for different screen sizes. For details, see Responsive editing for tablets and mobiles.<\/li>\n\n\n\n<li>Verify that the <strong>Z-index<\/strong> of the container is not being overlapped by other elements.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to change the background image of a section<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba3bc9d4b202f30209f742"],"footnotes":""},"categories":[1439],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","hentry","category-basic-functionality"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to configure and optimize background images in Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn How to configure and optimize background images in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\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\/help\/how-to-change-background-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to configure and optimize background images in Elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn How to configure and optimize background images in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-17T08:06:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T13:54:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\" \/>\n\t<meta property=\"og:image:width\" content=\"566\" \/>\n\t<meta property=\"og:image:height\" content=\"856\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"How to configure and optimize background images in Elementor\",\"datePublished\":\"2020-03-17T08:06:22+00:00\",\"dateModified\":\"2026-02-26T13:54:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\"},\"wordCount\":695,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\",\"articleSection\":[\"Basic functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\",\"url\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\",\"name\":\"How to configure and optimize background images in Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\",\"datePublished\":\"2020-03-17T08:06:22+00:00\",\"dateModified\":\"2026-02-26T13:54:21+00:00\",\"description\":\"Learn How to configure and optimize background images in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/how-to-change-background-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png\",\"width\":566,\"height\":856,\"caption\":\"The container's style tab\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-change-background-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Basic functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How to configure and optimize background images in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to configure and optimize background images in Elementor | Elementor","description":"Learn How to configure and optimize background images in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/how-to-change-background-image\/","og_locale":"en_US","og_type":"article","og_title":"How to configure and optimize background images in Elementor | Elementor","og_description":"Learn How to configure and optimize background images in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-change-background-image\/","og_site_name":"Help","article_published_time":"2020-03-17T08:06:22+00:00","article_modified_time":"2026-02-26T13:54:21+00:00","og_image":[{"width":566,"height":856,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"How to configure and optimize background images in Elementor","datePublished":"2020-03-17T08:06:22+00:00","dateModified":"2026-02-26T13:54:21+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/"},"wordCount":695,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png","articleSection":["Basic functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/how-to-change-background-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/","url":"https:\/\/elementor.com\/help\/how-to-change-background-image\/","name":"How to configure and optimize background images in Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png","datePublished":"2020-03-17T08:06:22+00:00","dateModified":"2026-02-26T13:54:21+00:00","description":"Learn How to configure and optimize background images in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-change-background-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/style-tab-background.png","width":566,"height":856,"caption":"The container's style tab"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-change-background-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Basic functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/"},{"@type":"ListItem","position":5,"name":"How to configure and optimize background images in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":164736,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/263\/revisions\/164736"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}