{"id":3937,"date":"2017-08-03T09:58:57","date_gmt":"2017-08-03T09:58:57","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=3937"},"modified":"2025-12-30T21:24:53","modified_gmt":"2025-12-30T19:24:53","slug":"website-background-images","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/website-background-images\/","title":{"rendered":"Website Background Images &#8211; The Ultimate Design Guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3937\" class=\"elementor elementor-3937\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-kaytpyg elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"kaytpyg\" 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-awjmcwb\" data-id=\"awjmcwb\" 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-cym0ldq elementor-widget elementor-widget-text-editor\" data-id=\"cym0ldq\" 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 factors that can make or break a website design has to do with how you setup your website background images.<\/p><p>Setting background image may seem simple:<\/p><p>1. You find an image from a free stock photo site<\/p><p>2. Upload it and you&#8217;re done, right?<\/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-9615ded elementor-align-center elementor-widget elementor-widget-button\" data-id=\"9615ded\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/introducing-background-slideshow\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn About Elementor's Background Slideshow and Other Background Features\u200b<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\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-2314e01 elementor-widget elementor-widget-text-editor\" data-id=\"2314e01\" 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>Actually, there is a much more elaborate process for getting your website background images to fit your website perfectly.<\/b><\/p>\n<p>This process includes several crucial steps:&nbsp;<\/p>\n<ul>\n<li>Getting the size of the image right<\/li>\n<li>Analyzing focal points<\/li>\n<li>Adding <a href=\"https:\/\/elementor.com\/blog\/v04-new-amazing-features\/\">background overlay<\/a><\/li>\n<li>Making it mobile <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"32034\">responsive<\/a> and so on.<\/li>\n<\/ul>\n<p>Luckily, with the many image background customization options available in Elementor, the process of customizing images for website backgrounds properly has become much easier.<\/p>\n<p>In this post, I want to share with you 10 best practices&nbsp;you need to follow in order to work properly with background images in Elementor.<\/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-g1zkls9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"g1zkls9\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-6i2wzcm elementor-widget elementor-widget-heading\" data-id=\"6i2wzcm\" 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\">#1 - Design Website Background Images With Wireframes\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-8srik7r elementor-widget elementor-widget-text-editor\" data-id=\"8srik7r\" 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>Hopefully, you are not working off your head when setting background images, but instead, follow a certain wireframe for the website.<\/p><p>This is the first and perhaps most important tip for using Elementor.<\/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-qvnqxfx elementor-widget elementor-widget-heading\" data-id=\"qvnqxfx\" 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\">What are wireframes?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-q2n5c7y elementor-widget elementor-widget-text-editor\" data-id=\"q2n5c7y\" 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>A wireframe is a graphical model of your website or page.<\/p><p>Wireframes serve for planning the structure of websites, before actually building them.<\/p><p>You can create website wireframes with software like Photoshop, Axure, Sketch, and Mockplus.<\/p><p>In a wireframe mockup, you should get a description of all the background image positions and sizes, making it easy to recreate it in Elementor.<\/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-ywg42yg elementor-widget elementor-widget-heading\" data-id=\"ywg42yg\" 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\">Wireframes keep you from making many design mistakes<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-avs6jo0 elementor-widget elementor-widget-text-editor\" data-id=\"avs6jo0\" 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>Our own team of designers, here in Elementor, use Photoshop and Sketch to plan out our templates, so you can see from the high-quality result that it is a must-have step.<\/p><p>If you don&#8217;t plan to use any wireframe tool, not even a napkin sketch, then I strongly suggest you stick to our pre-designed templates and built upon them.<\/p><p>Even the most professional designers in the world use a wireframe. Don&#8217;t think you&#8217;re any different.<\/p><p>Even if you&#8217;re not a designer&#8230; In fact &#8211; especially if you are not a designer, you need structure to make sure your efforts don&#8217;t go to waste.<\/p><p>Planning out the page also helps organize the background images you will use.<\/p><p>This way, you will know what sizes each of the images should be. It will also help you make sure the background images don&#8217;t conflict with other page elements, and fit neatly in the <a href=\"https:\/\/elementor.com\/blog\/grid-design\/\">website grid<\/a>.<\/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-hjrpf1s elementor-widget elementor-widget-heading\" data-id=\"hjrpf1s\" 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\">Recreating background images according to the wireframe<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vzrupqf elementor-widget elementor-widget-text-editor\" data-id=\"vzrupqf\" 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 page layouts are made of Sections, Columns and Widgets.\u00a0<\/p><p>Each of these can be seen as a layer, on which you can set a background image.<\/p><p>You also have a <a href=\"https:\/\/elementor.com\/help\/inner-section-widget\/\" target=\"_blank\" rel=\"noopener noreferrer\">Columns widget<\/a>, which can be used\u00a0as another layer of background image.<\/p><p>When\u00a0you are starting to work on recreating a part of the wireframe in Elementor, you need to first decide if you will place the background image of the wireframe in the section, column or widget level.<\/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-nwchrgw elementor-widget elementor-widget-heading\" data-id=\"nwchrgw\" 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\">How to set the background image\u00a0on the section level<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hklrbjq elementor-widget elementor-widget-text-editor\" data-id=\"hklrbjq\" 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>When you first upload an image to a section background, you will only see a small part of the background image height.\u00a0<\/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-hdd782m elementor-widget elementor-widget-image\" data-id=\"hdd782m\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/1-r4q70z2blscfnp4xitoefih5t1c0il6s0vjprna9ps.jpg\" title=\"Image size 4\" alt=\"Image size 4\" loading=\"lazy\" \/>\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-7wydgbe elementor-widget elementor-widget-text-editor\" data-id=\"7wydgbe\" 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>This is because the section has a small\u00a0default background height.<\/p><p>In order to display the image in full height, you have to increase the section height.<\/p><p>You can do that in one of two ways:<\/p><p>Go to Section &gt; Layout &gt; Height, and set a min height.\u00a0<\/p><p>Or go to Section &gt; Advanced, and add top and bottom padding.<\/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-pt9mvzr elementor-widget elementor-widget-heading\" data-id=\"pt9mvzr\" 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\">Setting the background image\u00a0on the column level<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ll5jo9y elementor-widget elementor-widget-text-editor\" data-id=\"ll5jo9y\" 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>Some situations require you to set the background image on the column level.<\/p><p>This is true when you want the background to span only a part of the section, or when you want to add another layer on top of an existing background.<\/p><p>The problem is that by default the column background is not seen.<\/p><p>To display the column background image, you need to add\u00a0a widget to the column. Widgets have a default height, so they make the section background visible.\u00a0<\/p><p>If you don&#8217;t want to add a visible widget, you can simply add a Spacer widget.<\/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-unr1lcf elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"unr1lcf\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-wbm29sk elementor-widget elementor-widget-heading\" data-id=\"wbm29sk\" 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\">#2 - Set the Proper Background Image Position<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2slskdj elementor-widget elementor-widget-image\" data-id=\"2slskdj\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/2-r4q71v0u25k6mfuic7hpsaeu04yhsapnh9q831yvu8.jpg\" title=\"Image size 3\" alt=\"Image size 3\" loading=\"lazy\" \/>\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-poobj6m elementor-widget elementor-widget-text-editor\" data-id=\"poobj6m\" 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>You can set the position of the image, so the image gets a focus on any one of 9 locations:<\/p><p>Top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.<\/p><p>Image position lets you choose which area of the image will get focused on, in cases where the image is larger in width or height than the section spacing.<\/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-jehj0pc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"jehj0pc\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-r77wxv1 elementor-widget elementor-widget-heading\" data-id=\"r77wxv1\" 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\">#3 - Set the Website Background Size<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-w1k2zv2 elementor-widget elementor-widget-image\" data-id=\"w1k2zv2\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/3-r4q73ff5g7pdz1kl6vvbxw6hn98im4xjp0vcvnn9h6.jpg\" title=\"Image size 2\" alt=\"Image size 2\" loading=\"lazy\" \/>\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-9z3dy9t elementor-widget elementor-widget-text-editor\" data-id=\"9z3dy9t\" 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 most cases, you will upload an image background that is larger than the actual background area.<\/p><p>This method of using larger images is recommended so as to ensure that\u00a0the image remains fully seen and not cut off on its sides on larger screens.<\/p><p>There are three\u00a0image size options: Auto, Cover and Contain.<\/p><p>Each displays the background image in a different way.<\/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-xdoj21k elementor-widget elementor-widget-heading\" data-id=\"xdoj21k\" 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\">Auto image size\n\n\n\n\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lkgl401 elementor-widget elementor-widget-text-editor\" data-id=\"lkgl401\" 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 image size, by default, is set to Auto.<\/p><p>What the Auto size means is that the background image will be displayed with its actual size.<\/p><p>Basically, Auto means no scaling.<\/p><p>If the size of the image is 1,000 pixels, and the section is only 800 pixels wide, then the image will be cropped to show only 800 pixels on the screen (the top left area by default).<\/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-m4wqxb4 elementor-widget elementor-widget-heading\" data-id=\"m4wqxb4\" 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\">\nCover image size\n\n\n\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cpfxscl elementor-widget elementor-widget-text-editor\" data-id=\"cpfxscl\" 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>If you set the image size to Cover, then the background image will be scaled to fit the width of the section without losing its proportions.<\/p><p>This means it will probably be cropped at its height. If you&#8217;ve used our templates, you may have noticed that in most cases we use the Cover image size. This is because it makes sure the image is displayed\u00a0in the right size, without scaling it too much.\u00a0<\/p><p>When using Elementor, Cover is your best choice for size in most cases. Auto runs the risk of showing an enlarged version of the image, and Contain runs the risk of showing a scaled image that is either too big or too small.<\/p><p>Cover shows the image\u00a0with the proper size, and if there is a mismatch between the section and the background image sizes the sides of the image is cropped.\u00a0If we make sure the background image still works with the sides cropped, we can use the Cover to properly display the background image on all devices, including mobile devices.\u00a0<\/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-6h04oif elementor-widget elementor-widget-heading\" data-id=\"6h04oif\" 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\">Contain image size\n\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ie2312n elementor-widget elementor-widget-text-editor\" data-id=\"ie2312n\" 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>If you set the size to Contain, then the image will be scaled so both the height and width fit inside the section,\u00a0keeping its original proportions.<\/p><p>This might mean leaving some white space on the left and right of the section or getting the image to repeat.<\/p><p>Bottom line &#8211; the most common use of background image sizes in Elementor is setting the background image to Cover, and setting the\u00a0section \/ column \/ widget minimum height to the\u00a0needed height.<\/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-8x5mr8v elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8x5mr8v\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-v7gdthr elementor-widget elementor-widget-heading\" data-id=\"v7gdthr\" 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\">#4 - Make Background Images Mobile Responsive<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-h5u806g elementor-widget elementor-widget-image\" data-id=\"h5u806g\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/4-r4q77yz2hdxa36z0nukezqwp0audtgyubidudswre8.jpg\" title=\"Image size\" alt=\"Image size\" loading=\"lazy\" \/>\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-vrs0i42 elementor-widget elementor-widget-text-editor\" data-id=\"vrs0i42\" 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>You can set the height of the background image by going to Section &gt; Layout.<\/p><p>Next, you can manually set the height in pixels, getting an exact height to be displayed across devices.<\/p><p>You can also set the height as VH. VH stands for hundredths of the viewport height.<\/p><p>What this means in plain English &#8211;<\/p><p>The scale is adaptive to the height of the device it is seen on. Each VH is 1% of the total viewport, making the entire scale 100%.<\/p><p>If you set the VH to 100%, then the image will always take up the entire screen height, no matter what screen resolution we are talking about.<\/p><p>This is great for <a href=\"https:\/\/elementor.com\/blog\/introducing-mobile-editing\/\">mobile responsiveness<\/a>, because it makes sure the image always takes up the entire screen height.<\/p><p>In case the section content height exceeds the section size, Elementor will show the entire content, and the section will get an increase in height.\u00a0<\/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-kdmkvyc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"kdmkvyc\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-ayosdkc elementor-widget elementor-widget-heading\" data-id=\"ayosdkc\" 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\">#5 - Choose Images for Boxed Or Full-Width Layouts<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1rkvgo0 elementor-widget elementor-widget-image\" data-id=\"1rkvgo0\" 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=\"800\" height=\"428\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/image15.gif\" class=\"attachment-full size-full wp-image-3959\" alt=\"Wide screen\" \/>\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-kx622e7 elementor-widget elementor-widget-text-editor\" data-id=\"kx622e7\" 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>When creating background images for a website, there are three main layout types to consider:<\/p><p><strong>1. Boxed websites &#8211;\u00a0<\/strong>These are websites wherein both the content and the background are boxed inside a confined width.<\/p><p>Such a layout can be suited for websites where the content needs to reside inside a well-defined and fixed grid.<\/p><p>An example is one of the most\u00a0popular WP related site &#8211; <a href=\"https:\/\/wpbeginner.com\">WPbeginner.com<\/a>.<\/p><p>Another example is our own website &#8211; <a href=\"https:\/\/elementor.com\/\">Elementor.com<\/a>.<\/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-tg3wrw2 elementor-widget elementor-widget-image\" data-id=\"tg3wrw2\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image16-r4q7329esj7dgi3pbq6jyzi1bv1dmdhaz7qk5s6rne.png\" title=\"Elementor\" alt=\"Elementor\" loading=\"lazy\" \/>\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-abce16l elementor-widget elementor-widget-text-editor\" data-id=\"abce16l\" 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><strong>2. Full width background &#8211;<\/strong> The other type of website layout, which has become very trendy in the last few years,\u00a0includes a grid with full width images, with boxed content.<\/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-2nmxib9 elementor-widget elementor-widget-image\" data-id=\"2nmxib9\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image11-r4q7025yyl3edcgpuxggi8s10ju616k68cppyyn1js.png\" title=\"Full width\" alt=\"Full width\" loading=\"lazy\" \/>\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-0is5lrb elementor-widget elementor-widget-text-editor\" data-id=\"0is5lrb\" 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><strong>3. Full width background + content<\/strong> &#8211; There are a few\u00a0websites that are built with\u00a0both the content and the background spanning the entire width of the page. This is less common, and is usually used for websites high on the visual side and with a short amount of content.<\/p><p>You can see an example of this layout in the <a href=\"https:\/\/collagecrafting.com\/\">Collage Crafting site<\/a>. This kind of design is less common, so we won&#8217;t really elaborate on it further.<\/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-o875euz elementor-widget elementor-widget-heading\" data-id=\"o875euz\" 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\">Full width or boxed templates<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1zy6eo elementor-widget elementor-widget-text-editor\" data-id=\"e1zy6eo\" 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>Most of Elementor&#8217;s templates use full-width image background, but they also fit perfectly well on boxed layouts.<\/p><p>The About &#8211; Startup <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26995\">template<\/a>, for example, looks like this on full-width:<\/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-lznjlav elementor-widget elementor-widget-image\" data-id=\"lznjlav\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image12-r4q73453679y3q0z0qzt3z0yims41rornh1j4c3zcw.png\" title=\"Full width template\" alt=\"Full width template\" loading=\"lazy\" \/>\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-nvs0ldv elementor-widget elementor-widget-text-editor\" data-id=\"nvs0ldv\" 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>But can also be used as a contained boxed layout:<\/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-108ga61 elementor-widget elementor-widget-image\" data-id=\"108ga61\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image8-r4q6x22j4mzfa6tqe4qd1i20p8myfzn1hhovs53c38.png\" title=\"Boxed template\" alt=\"Boxed template\" loading=\"lazy\" \/>\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-ssaox1q elementor-widget elementor-widget-text-editor\" data-id=\"ssaox1q\" 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>Figuring out if you&#8217;re dealing with a boxed or full-width layout is a must, in order to get the background image sizes right.<\/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-8hukupk elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8hukupk\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-yk4cm4x elementor-widget elementor-widget-heading\" data-id=\"yk4cm4x\" 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\">#6 - Resize Background Images for Better Speed<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lthkuuk elementor-widget elementor-widget-text-editor\" data-id=\"lthkuuk\" 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>&#8220;What&#8217;s the proper width for my background images?&#8221;<\/p><p>This is a question we get asked about a lot.<\/p><p>When you first download an image from sites like <a href=\"https:\/\/unsplash.com\">Unsplash<\/a>, its original size is usually at least 4MB.<\/p><p>The large size is useful in terms of resolution, but trust me &#8211; you don&#8217;t want to load this full size of images to your website.<\/p><p>It will slow it down like you can&#8217;t believe.<\/p><p>Instead, you should resize the image to your needs and maybe crop it for design purposes.<\/p><p>You also don&#8217;t want an image that is too small, making for a pixelated background.<\/p><p>Write down all the exact sizes of the images on your website. This will help you crop and resize all the images faster.<\/p><p>Setting the height is somewhat more complex. With height, there are no clear rules, but there are common sizes you can try to adhere to.<\/p><p>You also don&#8217;t want it to be too short, resulting in a thin layer for a background.<\/p><p>A common ratio is 16:9, which is also the ratio of wide-screen TVs. You can read more about image optimization in the comprehensive <a href=\"https:\/\/kinsta.com\/blog\/optimize-images-for-web\/\" target=\"_blank\" rel=\"noopener\">Kinsta guide on the subject<\/a>.<\/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-w6ld043 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"w6ld043\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-17w5j4i elementor-widget elementor-widget-heading\" data-id=\"17w5j4i\" 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\">#7 - Crop the Image to Improve Focus and Alignment<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-jrgnl6w elementor-widget elementor-widget-text-editor\" data-id=\"jrgnl6w\" 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>As mentioned, we recommend creating your layout (even a rough draft of it) in some graphic software like Photoshop or Sketch.<\/p><p>This is critical because it allows you to set the right balance between the background image and the other elements on your page like text, and icons etc.<\/p><p>This is the easiest way to crop the image so it aligns in the best way possible with the widgets.<\/p><p>If you want to work straight in the Elementor editor, you can do a rough estimate of the crop, and use a free tool like Pixlr to crop the image.<\/p><p>Here is how this is done:<\/p><p>First, upload the image to <a href=\"https:\/\/pixlr.com\">Pixlr<\/a>:<\/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-spe92m5 elementor-widget elementor-widget-image\" data-id=\"spe92m5\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image1-r4q6wowsgyherncuiz1l2ldkduftg86srok329mtxi.png\" title=\"pixlr2\" alt=\"pixlr2\" loading=\"lazy\" \/>\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-a7nik4j elementor-widget elementor-widget-text-editor\" data-id=\"a7nik4j\" 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>Then, click on crop, and choose Aspect ratio:<\/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-7re72og elementor-widget elementor-widget-image\" data-id=\"7re72og\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image6-r4q70j32dlqk6bs544rqr4ibphirvqfcaogglxxydk.png\" title=\"pixlr\" alt=\"pixlr\" loading=\"lazy\" \/>\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-i5ughqj elementor-widget elementor-widget-text-editor\" data-id=\"i5ughqj\" 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>Now, select the area you want to focus on:<\/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-5rm20qd elementor-widget elementor-widget-image\" data-id=\"5rm20qd\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image3-r4q75sygq4yhbk4cbeudqslfpbix2ld4cs8jju4fyq.png\" title=\"full background image\" alt=\"full background image\" loading=\"lazy\" \/>\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-oih7u8v elementor-widget elementor-widget-text-editor\" data-id=\"oih7u8v\" 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>After applying the crop, the result will be a more understandable and focused background:<\/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-2bwa7sl elementor-widget elementor-widget-image\" data-id=\"2bwa7sl\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image4-r4q6z59mbdud2zsi718ikz2w82cbjrxkftvq69zu1e.jpg\" title=\"cropped image\" alt=\"cropped image\" loading=\"lazy\" \/>\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-xy10snr elementor-widget elementor-widget-text-editor\" data-id=\"xy10snr\" 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>Other than cropping, you might also like to straighten and rotate the image, so the elements in the image appear as parallel to the frame of the image.<\/p><p>You can also decide to edit out certain irrelevant elements that appear in the image with cropping.<\/p><p>While you are cropping, I would also suggest keeping in mind which widgets you plan to place on top of the image background, and make sure they don&#8217;t cover any important visual objects in the image you would want to keep visible.<\/p><p><strong>Side note<\/strong> &#8211; You can use Pixlr&#8217;s three column grid and position the subjects in the meeting of the lines of the grid (This is called the &#8216;Rule of thirds&#8217;).<\/p><p>After cropping is done, you still need to get the image size right.<\/p><p>In Pixlr, you should go to Image &gt; Image Size and enter the image size you need for your site.<\/p><p>Make sure the image size you entered is smaller than the base image, so your image doesn&#8217;t get expanded and pixelated.<\/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-glkuyhy elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"glkuyhy\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-b5jxnfa elementor-widget elementor-widget-heading\" data-id=\"b5jxnfa\" 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\">#8 - Make Sure the Image Focal Point Doesn't Get Lost<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hmgynmm elementor-widget elementor-widget-text-editor\" data-id=\"hmgynmm\" 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 focal point refers to the single element in the photo that draws the attention of the viewer.<\/p><p>Dealing with an image background that includes a single focal point is somewhat complex because you want the image to be positioned correctly across all screens and devices.<\/p><p>This is not a simple task and requires some planning in advance.<\/p><p>Let&#8217;s take this image from Unsplash, which has been cropped and resized so the focal point is the person is situated on the left.<\/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-xo6p9h5 elementor-widget elementor-widget-image\" data-id=\"xo6p9h5\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image2-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jt1m.png\" title=\"Background image for WordPress\" alt=\"Background image for WordPress\" loading=\"lazy\" \/>\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-aoqnu2e elementor-widget elementor-widget-text-editor\" data-id=\"aoqnu2e\" 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>Because there is a clear focal point in this image, it will most likely not be consistently viewed across devices. In fact, when I switch to mobile view, the image of the person completely disappears:<\/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-ur84l8k elementor-widget elementor-widget-image\" data-id=\"ur84l8k\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image9-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jt1w.png\" title=\"Mobile view\" alt=\"Mobile view\" loading=\"lazy\" \/>\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-zh1fqto elementor-widget elementor-widget-text-editor\" data-id=\"zh1fqto\" 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 avoid such issues, there are three possible solutions:<\/p><p><strong>1. Choose an image wherein the focal point just isn&#8217;t very important.<\/strong><\/p><p>This way, if the focal point gets cut on mobile, the background image can still portray the experience and the atmosphere you want the user to receive.<\/p><p><strong>2. Choose an image with a center focal point.<\/strong><\/p><p>This way, the transition to mobile view will remove the sides of the image, and the center focal point will remain in tact.<\/p><p>In our Spa template example below, the centered image will be shown across all devices:<\/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-m5xsi3o elementor-widget elementor-widget-image\" data-id=\"m5xsi3o\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image10-r4q70z2blscfnp4xitoefih5t1c0il6s0vjprna9h6.png\" title=\"Elementor template\" alt=\"Elementor template\" loading=\"lazy\" \/>\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-xtjuzr5 elementor-widget elementor-widget-image\" data-id=\"xtjuzr5\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/mobile-view-r4q6z67gi7vnelr51jn55guctg7orh1aryj7njyfn4.jpg\" title=\"mobile-view\" alt=\"mobile view\" loading=\"lazy\" \/>\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-79xyogh elementor-widget elementor-widget-text-editor\" data-id=\"79xyogh\" 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>Notice that because the head is at the bottom, you have to set the minimum height as 100 VH, meaning the image will always be shown.<\/p><p><strong>3. Separate the figure and the background.<\/strong><\/p><p>Set a background with no focal point, and then add an image widget on top of it and place it at an adaptive position.<\/p><p>This is the method we&#8217;ve used in some of our templates, like in this Real estate template page. For this template, we used an office background image, on which we placed 2 columns. In one column we placed the contact form and in the other we placed the image of the businessman.<\/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-saa3thi elementor-widget elementor-widget-image\" data-id=\"saa3thi\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image14-r4q77tc1cdpk5j77ks4nksbxfzm6jacgaqgxi553me.png\" title=\"Elementor template Real Estate 2\" alt=\"Elementor template Real Estate 2\" loading=\"lazy\" \/>\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-hrdc92w elementor-widget elementor-widget-text-editor\" data-id=\"hrdc92w\" 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 businessman will stay at a relative distance to the form in both desktop and tablet views.<\/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-kjopscp elementor-widget elementor-widget-image\" data-id=\"kjopscp\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image13-r4q72b03ac623t7aqwedgodo3orqf5h37gth8rb6rg.png\" title=\"Elementor template Real Estate\" alt=\"Elementor template Real Estate\" loading=\"lazy\" \/>\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-yi3j409 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"yi3j409\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-qrvpsc8 elementor-widget elementor-widget-heading\" data-id=\"qrvpsc8\" 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\">#9 - Learn to Work with Real Images and Not Just Stock Images<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6dkp1u elementor-widget elementor-widget-text-editor\" data-id=\"a6dkp1u\" 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>What you see in templates and in theme demo content are usually professional background images, taken from either free resources like Unsplash or paid ones like Shutterstock.<\/p><p>Given you are in charge of customizing the site you are working on to a real business, in most cases, you will need to eventually replace at least some of those background images with images from the actual business you are creating the site for.<\/p><p>This is actually a BIG problem.<\/p><p>Surprising enough, in my research writing this article I didn&#8217;t come across a single article dealing with this issue.<\/p><p>In Unsplash, you usually get images like this:<\/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-32dcgmm elementor-widget elementor-widget-image\" data-id=\"32dcgmm\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image18-r4q6zun9fwt3sgrn2u7fyaoc9gv8blqbjbhu4qy7d4.jpg\" title=\"image18\" alt=\"stock background image\" loading=\"lazy\" \/>\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-imj3lgn elementor-widget elementor-widget-text-editor\" data-id=\"imj3lgn\" 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>Most businesses don&#8217;t have a stock of studio quality images made by a professional photographer, showcasing their business.<\/p><p>Instead, they have a bunch of photos like this:<\/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-kytyuxf elementor-widget elementor-widget-image\" data-id=\"kytyuxf\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image17-r4q72fpa8ichpv0gzgfib56z2m4khmzqw42wn549aw.jpg\" title=\"mobile-view\" alt=\"unprofessional image\" loading=\"lazy\" \/>\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-d4tjisk elementor-widget elementor-widget-text-editor\" data-id=\"d4tjisk\" 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>Quite a difference, right?<\/p><p>There is no clear way to bridge this gap.<\/p><p>Being aware of this gap of quality is in itself an important step towards trying to spruce up your images and improving their overall style.<\/p><p>One preferred solution for this problem is to go back to the business owner and ask them to hire a professional photographer and produce a set of nicer images to be used for backgrounds and content.<\/p><p>Another solution is to use the previous point of cropping, and crop unnecessarily less attractive\u00a0elements of the image.<\/p><p>Preferably you will also do some\u00a0adjustment of colors, balance, lighting and contrasts.<\/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-hh43oxz elementor-widget elementor-widget-image\" data-id=\"hh43oxz\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/2-1-r4q72fpa8ichpv0gzgfib56z2m4khmzqw42wn5481c.jpg\" title=\"2\" alt=\"background image improved\" loading=\"lazy\" \/>\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-vt60u8o elementor-widget elementor-widget-text-editor\" data-id=\"vt60u8o\" 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\tYou can also mix and match stock images and the images you get from the business, so you are not stuck with just a few photo selection.\n\nFinally, you can use the image overlay inside Elementor to improve the image color balance.\n\nIt also helps make all of your displayed pictures in the website have a common unison style and seem like a collection,\u00a0by receiving the same overlay.\n\nThis is what we will explain about in the next point.\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-gpgrdby elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"gpgrdby\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-7wqzctp elementor-widget elementor-widget-heading\" data-id=\"7wqzctp\" 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\">#10 - Add an Image Overlay to Get a More Consistent Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eky6deq elementor-widget elementor-widget-text-editor\" data-id=\"eky6deq\" 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>Using Elementor&#8217;s image overlay, you can add color and gradient image overlays from inside the editor, resulting in some really nice effects.<\/p><p>These overlays are useful for a variety of goals:<\/p><p><b>1. Conceal poor quality images<\/b><\/p><p>If you are using a low-quality image, you can use overlays to mask the background out.<\/p><p>This way, even if the quality of the image is low, it will be less visible by the user.<\/p><p><b>2. Highlighting the headings or other text elements<\/b><\/p><p>With overlays, you can increase the contrast between the background and the heading.<\/p><p>This is often done for hero sections, to get the headline to stick out and be more emphasized.<\/p><p>For this use, you will most often use gray tones to darken the background image.<\/p><p><b>3. Adjusting the color of the image to fit your brand and website color palette<\/b><\/p><p>You can use one of the colors of our site&#8217;s main color palette, this way create a sort of filter to the entire section.<\/p><p>This method is used in the &#8216;<a href=\"https:\/\/library.elementor.com\/homepage-study\/\">Homepage Study<\/a>&#8216; template:<\/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-r4hail8 elementor-widget elementor-widget-image\" data-id=\"r4hail8\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image5-r4q781sl1w1520ux7dsap872sgghgka1bwcatmskj2.png\" title=\"image5\" alt=\"image5\" loading=\"lazy\" \/>\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-6dn9w48 elementor-widget elementor-widget-text-editor\" data-id=\"6dn9w48\" 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 template features a purple color overlay.<\/p><p>If you choose to use an overlay for background images, my recommendation is to try to stay as consistent as possible.<\/p><p>Notice that for the template I just mentioned, we used the same overlay in the bottom section as well:<\/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-d2fat9t elementor-widget elementor-widget-image\" data-id=\"d2fat9t\" 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 decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image7-r4q721lpdzt6vpky9sc3rqr25u22a6fru6amfzp48s.png\" title=\"image7\" alt=\"image7\" loading=\"lazy\" \/>\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-sqzyhtw elementor-widget elementor-widget-text-editor\" data-id=\"sqzyhtw\" 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>4. Filter images to get a more consistent color balance.<\/b><\/p><p>Another use of the overlay is to create a more solid and consistent look for images that display colors that are too varied in nature.<\/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-2kg08ep elementor-widget elementor-widget-text-editor\" data-id=\"2kg08ep\" 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><\/b>After uploading the image to Elementor, you go to Section &gt; Style &gt; Background Overlay.<\/p><p>From here, you can set a basic color overlay, and play with the opacity to increase or decrease its effect.<\/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-e2q2bhn elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e2q2bhn\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\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-6q34mr6 elementor-widget elementor-widget-heading\" data-id=\"6q34mr6\" 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\">Don't Leave this Post without Taking Action...<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hhumajd elementor-widget elementor-widget-text-editor\" data-id=\"hhumajd\" 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>I certainly hope this guide provides you with some actionable tips, which you can implement on website background images you&#8217;ve previously used.<\/p><p>Try to ask yourself if website background images you&#8217;ve used in the past adhere to each point we&#8217;ve made and if all the background images are optimally set.<\/p><p>Please send me your websites in the comments, including before and after pictures of how you improved your background images.<\/p><p><b>If you like this sort of in-depth design tutorial article, let me know about it as well in the comments. It&#8217;s always nice to hear our efforts are well received.<\/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>In this post, we share 10 best practices for working properly with background images in Elementor.<\/p>\n","protected":false},"author":4,"featured_media":4343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-3937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Design Website Background Images Using Elementor<\/title>\n<meta name=\"description\" content=\"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for 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\/website-background-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design Website Background Images Using Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/website-background-images\/\" \/>\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=\"2017-08-03T09:58:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T19:24:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.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\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Website Background Images &#8211; The Ultimate Design Guide\",\"datePublished\":\"2017-08-03T09:58:57+00:00\",\"dateModified\":\"2025-12-30T19:24:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/\"},\"wordCount\":3231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/website-background-images\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/\",\"url\":\"https:\/\/elementor.com\/blog\/website-background-images\/\",\"name\":\"How to Design Website Background Images Using Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png\",\"datePublished\":\"2017-08-03T09:58:57+00:00\",\"dateModified\":\"2025-12-30T19:24:53+00:00\",\"description\":\"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/website-background-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/website-background-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Website Background Images &#8211; The Ultimate Design Guide\"}]},{\"@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":"How to Design Website Background Images Using Elementor","description":"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for 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\/website-background-images\/","og_locale":"en_US","og_type":"article","og_title":"How to Design Website Background Images Using Elementor","og_description":"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for more.","og_url":"https:\/\/elementor.com\/blog\/website-background-images\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-08-03T09:58:57+00:00","article_modified_time":"2025-12-30T19:24:53+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/website-background-images\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Website Background Images &#8211; The Ultimate Design Guide","datePublished":"2017-08-03T09:58:57+00:00","dateModified":"2025-12-30T19:24:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/"},"wordCount":3231,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/website-background-images\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/website-background-images\/","url":"https:\/\/elementor.com\/blog\/website-background-images\/","name":"How to Design Website Background Images Using Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png","datePublished":"2017-08-03T09:58:57+00:00","dateModified":"2025-12-30T19:24:53+00:00","description":"Learn 10 best practices to help you work properly with website background images in Elementor WordPress Page Builder. Click for more.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/website-background-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/website-background-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/website-background-images\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/background-post.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/website-background-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Website Background Images &#8211; The Ultimate Design Guide"}]},{"@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\/3937","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=3937"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/3937\/revisions"}],"predecessor-version":[{"id":149209,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/3937\/revisions\/149209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/4343"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=3937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=3937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=3937"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=3937"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=3937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}