{"id":20847,"date":"2019-01-14T13:21:17","date_gmt":"2019-01-14T13:21:17","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=20847"},"modified":"2024-08-14T10:03:37","modified_gmt":"2024-08-14T07:03:37","slug":"responsive-image-background","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/responsive-image-background\/","title":{"rendered":"Introducing Elementor v2.4: Make WordPress Background Images Responsive"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"20847\" class=\"elementor elementor-20847\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-50d5869 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"50d5869\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e1afc09\" data-id=\"e1afc09\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b32f0de elementor-widget elementor-widget-text-editor\" data-id=\"b32f0de\" 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>We&#8217;ve always been proud of our flexible mobile design capabilities. But getting the background image position just right was still a challenge for Elementor users.<\/p><p>If you&#8217;ve ever built a website, you have probably faced this common issue: <br \/>On mobile, you want to focus on the dog&#8217;s face, but end up only showing its tail.<\/p><p>With the recent release of Core v2.4, we are introducing a full set of capabilities to help you customize background images for any device.\u00a0<b>Meet Responsive Background Image controls.<\/b><\/p>\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-2d7c9d2 elementor-blockquote--skin-clean elementor-blockquote--align-center elementor-widget elementor-widget-blockquote\" data-id=\"2d7c9d2\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\tYour images look perfect on any device, with <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\" title=\"Responsive\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"7198\">Responsive<\/a> Background controls.\t\t\t<\/p>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22f7322 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22f7322\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3a3a752\" data-id=\"3a3a752\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c14d2e9 elementor-widget elementor-widget-heading\" data-id=\"c14d2e9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Responsive Background Image Controls\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-036033d elementor-widget elementor-widget-video\" data-id=\"036033d\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/responsive.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-8fba000 elementor-widget elementor-widget-text-editor\" data-id=\"8fba000\" 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>The new version of Elementor lets users have complete control over the background image controls on desktop, tablet and mobile devices. This control includes device-specific settings over background image controls (image, position, attachment, repeat and size).\u00a0<\/p><p>Now, you can finally set different positions per device. Set &#8216;center-center&#8217; for desktop, and &#8216;center-top&#8217; for mobile, so all devices show a similar area of the image. You can also designate a different size for each device. Set &#8216;cover&#8217; for desktop and &#8216;contain&#8217; for mobile.<\/p><p>This was a huge pain for many users, and I am sure they will appreciate this new feature (you&#8217;re welcome \u263a\ufe0f).<\/p><p>Besides size and position, we added the option to set completely different images per device. Device-specific size and position were the first additional responsive controls. We took it a step forward and also added custom size and position, to give you an even more flexible design experience.<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a534cbb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a534cbb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f4eda13\" data-id=\"f4eda13\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dd49d8b elementor-widget elementor-widget-heading\" data-id=\"dd49d8b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Custom Background Image Size &amp; Position\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91d6b27 elementor-widget elementor-widget-video\" data-id=\"91d6b27\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/Custom_position.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-afde9e4 elementor-widget elementor-widget-video\" data-id=\"afde9e4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/Custom_positon_panel1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-fb71b9c elementor-widget elementor-widget-text-editor\" data-id=\"fb71b9c\" 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>Previously, you had to make do with 3 background image size settings: auto, cover or contain. Similarly, you could only define general background image positions like &#8216;Top Left&#8217;.<\/p><p>We are now adding two new custom controls: background size and background position.<\/p><p>With <b>custom background position<\/b>, you can manually set your desired background position on an X &amp; Y axis. This way, you now have the option to set the exact of alignment for the background.<\/p><p>Besides position, you can also set <b>custom background size<\/b>. Set an exact width for your background image width for your background image.<\/p>\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-eac342b elementor-widget elementor-widget-video\" data-id=\"eac342b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/Custom_size.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-f376d38 elementor-hidden-phone elementor-widget elementor-widget-video\" data-id=\"f376d38\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/Custom_size_panel-2.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-3d5365a elementor-widget elementor-widget-text-editor\" data-id=\"3d5365a\" 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>These settings, custom background size and position, are especially crucial when it comes to responsive design. Use these custom settings to get a specific focus on the image&#8217;s main focal point for desktop, tablet and mobile devices.<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-83da021 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"83da021\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-aefbfec\" data-id=\"aefbfec\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-31a2057 elementor-widget elementor-widget-heading\" data-id=\"31a2057\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Responsive Border Controls\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49fcbb4 elementor-widget elementor-widget-video\" data-id=\"49fcbb4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/responsive_border.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-4251c07 elementor-widget elementor-widget-text-editor\" data-id=\"4251c07\" 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>Besides background images, we also added the ability to set different border-radius and border width per device.<\/p><p>An everyday use of device-specific borders is when you have an inline row of links, separated by a column border. This border becomes redundant on mobile, since the row stops being inline and the links get separated into separate rows.<\/p><p>In this scenario, the obvious choice is to remove the border from the mobile layout. Luckily with the new responsive borders feature, this can easily be achieved.<\/p><p>No more of those weird &#8216;orphaned borders&#8217; on mobile!<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8aa7cae elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8aa7cae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e09ddf7\" data-id=\"e09ddf7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1744df9 elementor-widget elementor-widget-heading\" data-id=\"1744df9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Elementor Safe Mode - An Easy Way to Troubleshoot Issues\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-716d3e1 elementor-widget elementor-widget-video\" data-id=\"716d3e1\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/safe_mode.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-9914b87 elementor-widget elementor-widget-text-editor\" data-id=\"9914b87\" 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>Here at Elementor, we care about offering our users a bug-free and flowing experience.<\/p><p>There are tens of thousands of plugins and themes, with millions of combinations for setting them up to work together. These combinations cause inevitable conflicts, related or unrelated to Elementor.<\/p><p>We continuously try to reduce these issues for our users, to create a better workflow.<\/p><p>A recurring issue occurs when users can&#8217;t load the editor.<\/p><p>This issue has been given many names: white screen of death, can&#8217;t edit, stuck on loading\u2026<\/p><p><span style=\"font-weight: bolder\">Our solution: meet Safe Mode!<\/span><\/p><p>Some of you might remember that Windows used to have a safe mode option that proved helpful in fixing a lot of the errors that occurred in Windows.<\/p><p>We created a similar solution for Elementor.<\/p><p>From now on, if you run into a never-ending loading page, you&#8217;ll have a button to switch on \u2018Safe Mode&#8217;.<\/p><p>Consider \u2018Safe Mode&#8217; a safe environment that isolates Elementor and WordPress from the themes and plugins that might be causing the error.<\/p><p>With Safe Mode, over 80% of loading issues will be temporarily solved.\u00a0<\/p><p><b>Safe Mode switched on and everything is loading properly?<\/b><\/p><p>This means the cause of the error was probably your theme or one of the plugins. Go ahead and deactivate them one by one to find the guilty party.<\/p><p><b>Safe Mode switched on and it&#8217;s still not loading?<\/b><\/p><p>This means you should look elsewhere for the solution, it&#8217;s most likely a custom-code or hosting related issue.<\/p><p>Safe Mode turns every Elementor user into a mini Sherlock Holmes.<\/p><p><i>&#8216;Elementor-y, my dear Watson!&#8217;<\/i><\/p><p><b>&#8220;Will Turning On Safe Mode Affect My Site?&#8221;<\/b><\/p><p>Rest assured that safe mode won&#8217;t have any effect on your site visitors. They&#8217;ll be able to use your site as usual, and your site will display your normal theme design, as well as all the installed plugins.<\/p><p>The only thing that changes is that the Elementor editor loading process is done without any activated Plugins or Themes.<\/p><p>Safe Mode is a huge step forward for Elementor users in terms of getting a far more stable, seamless and error-free user experience.<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d5a735 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d5a735\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-459a48e\" data-id=\"459a48e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-883c2ae elementor-widget elementor-widget-heading\" data-id=\"883c2ae\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">External Video\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69b87dd elementor-widget elementor-widget-text-editor\" data-id=\"69b87dd\" 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>In\u00a0<a href=\"https:\/\/elementor.com\/blog\/2-1-new-features\/\" target=\"_blank\" rel=\"noopener\">version 2.1<\/a>, we added the option of adding self-hosted videos to the video widget. Why settle for YouTube and Vimeo right? But hosting video is expensive.<\/p><p>So now we\u2019ve also added the option to add videos using external links.<\/p><p>This is great in two ways:<\/p><p>You can embed videos from other services like\u00a0<a href=\"https:\/\/coverr.co\/\" target=\"_blank\" rel=\"noopener\">Coverr<\/a>.<\/p><p>You can host your video files on a cheaper video hosting and add it to your site.<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4fe3fdd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4fe3fdd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8fe6712\" data-id=\"8fe6712\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-010cc5a elementor-widget elementor-widget-heading\" data-id=\"010cc5a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Read More Tag &amp; Widget\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cbc2cf elementor-widget elementor-widget-video\" data-id=\"1cbc2cf\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/01\/Read_more_tag.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\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-be15e13 elementor-widget elementor-widget-image\" data-id=\"be15e13\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"357\" height=\"244\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=357,h=244\/blog\/wp-content\/uploads\/2019\/01\/read_more_widget2.png\" class=\"attachment-large size-large wp-image-21543\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=357\/blog\/wp-content\/uploads\/2019\/01\/read_more_widget2.png 357w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/01\/read_more_widget2-300x205.png 300w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/>\t\t\t\t\t\t\t\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-c2d9800 elementor-widget elementor-widget-text-editor\" data-id=\"c2d9800\" 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>One of the first requests we received was to add WordPress&#8217;s read more tag to Elementor.<\/p><p>This was a small request, but finally, we got around to pushing it through.<\/p><p>Read more is the tag you add to your blog post, that then translates to the cut off of the text in the archive&#8217;s post display. This allows you to show the teaser for your article on your main blog page.<\/p><p>Now you can easily add the read more tag in the text editor widget or as a separate widget.<\/p><p>We have also added a &#8216;Read More&#8217; widget, that you can place between two text editor widgets, so your archive page will display an excerpt that cuts-off exactly where you want it to.<\/p><p><b>Please Note:\u00a0<\/b>This widget only affects themes that use \u2018the_content&#8217; in standard WordPress archive pages. It does not affect in Elementor-designed archive templates.\u00a0<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2a92c44 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2a92c44\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-310f934\" data-id=\"310f934\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-adff5bd elementor-widget elementor-widget-heading\" data-id=\"adff5bd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">New Elementor &amp; Templates Menus\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb923b4 elementor-widget elementor-widget-text-editor\" data-id=\"eb923b4\" 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>To make it easier to handle the different Elementor dashboard screens, we\u2019ve separated the previously named \u2018My Templates\u2019 menu, and renamed it \u2018Templates\u2019.\u00a0<\/p><p>We\u2019ve also positioned the Elementor &amp; Templates side menus higher up on the dashboard menu, to make it more easily accessible.<\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-86ea7ea elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"86ea7ea\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f20c9bc\" data-id=\"f20c9bc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f2768ad elementor-widget elementor-widget-heading\" data-id=\"f2768ad\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Elementor Popups... Coming Soon<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14dda81 elementor-widget elementor-widget-text-editor\" data-id=\"14dda81\" 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>Elementor Popups are coming to Pro. Be sure to check out the sneak peek:<\/p>\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-4beb9e2 elementor-widget elementor-widget-video\" data-id=\"4beb9e2\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=3N8vjG4yLDA&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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-eec7933 elementor-blockquote--skin-quotation elementor-blockquote--align-center elementor-widget elementor-widget-blockquote\" data-id=\"eec7933\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\tWith Safe Mode, over 80% of loading issues can be easily identified. \n\t\t\t<\/p>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-87f1c4c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"87f1c4c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-19ce532\" data-id=\"19ce532\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-935b5c1 elementor-widget elementor-widget-heading\" data-id=\"935b5c1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-755552f elementor-widget elementor-widget-text-editor\" data-id=\"755552f\" 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>It&#8217;s exciting to start-off 2019 with these helpful features, many of which have been requested by our community through GitHub.<\/p><p><b>Which of these features is the most helpful to your workflow? Is it Safe Mode, Responsive Background, or Read More? Please let us know in the comments below.<\/b><\/p>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor v2.4 introduces features that focus on improving your user experience: mobile control over background images, custom background size and position, safe mode for troubleshooting and more.<\/p>\n","protected":false},"author":4,"featured_media":21586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-20847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-features","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing v2.4: Make Background Images Responsive<\/title>\n<meta name=\"description\" content=\"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode &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\/blog\/responsive-image-background\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing v2.4: Make Background Images Responsive\" \/>\n<meta property=\"og:description\" content=\"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode &amp; more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/responsive-image-background\/\" \/>\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=\"2019-01-14T13:21:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-14T07:03:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Introducing Elementor v2.4: Make WordPress Background Images Responsive\",\"datePublished\":\"2019-01-14T13:21:17+00:00\",\"dateModified\":\"2024-08-14T07:03:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/\"},\"wordCount\":1305,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/responsive-image-background\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/\",\"url\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/\",\"name\":\"Introducing v2.4: Make Background Images Responsive\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png\",\"datePublished\":\"2019-01-14T13:21:17+00:00\",\"dateModified\":\"2024-08-14T07:03:37+00:00\",\"description\":\"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode & more\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/responsive-image-background\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-image-background\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor v2.4: Make WordPress Background Images Responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/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\/#\/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\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing v2.4: Make Background Images Responsive","description":"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode & 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\/blog\/responsive-image-background\/","og_locale":"en_US","og_type":"article","og_title":"Introducing v2.4: Make Background Images Responsive","og_description":"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode & more","og_url":"https:\/\/elementor.com\/blog\/responsive-image-background\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-01-14T13:21:17+00:00","article_modified_time":"2024-08-14T07:03:37+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Introducing Elementor v2.4: Make WordPress Background Images Responsive","datePublished":"2019-01-14T13:21:17+00:00","dateModified":"2024-08-14T07:03:37+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/"},"wordCount":1305,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png","keywords":["Build","Video"],"articleSection":["New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/responsive-image-background\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/","url":"https:\/\/elementor.com\/blog\/responsive-image-background\/","name":"Introducing v2.4: Make Background Images Responsive","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png","datePublished":"2019-01-14T13:21:17+00:00","dateModified":"2024-08-14T07:03:37+00:00","description":"Elementor v2.4 introduces features that focus on improving your user experience: responsive background images, custom background-size, safe mode & more","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/responsive-image-background\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/01\/Background-Customization_FB-1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/responsive-image-background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor v2.4: Make WordPress Background Images Responsive"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/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\/#\/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\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/20847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=20847"}],"version-history":[{"count":12,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/20847\/revisions"}],"predecessor-version":[{"id":109248,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/20847\/revisions\/109248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/21586"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=20847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=20847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=20847"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=20847"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=20847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}