{"id":7804,"date":"2021-07-05T14:33:23","date_gmt":"2021-07-05T14:33:23","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=7804"},"modified":"2021-06-04T15:00:45","modified_gmt":"2021-06-04T15:00:45","slug":"wordpress-background-images","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/","title":{"rendered":"How to Add a WordPress Background Image to Any Web Page"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">I\u2019m gonna keep this intro really short.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s what we\u2019re going to discuss in this article:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What are background images<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What\u2019s the thing with parallax backgrounds?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to add background images to your WordPress website<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to approach image size in WordPress<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ready, steady? Let\u2019s go!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">What are background images?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Background images are images that are applied to the background of an element on a website, in an email, etc. While the hero image is the main focal point of a website or an email, the background images are more subtle. They support other website elements, as a second layer: calls to action, other images, various sections of the site, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a look at some examples of such background images:<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">IKEA<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">On the homepage of the IKEA website, background images are used to present their inspiring stories. The title and category of the story are placed on top of the image. There is a gradient overlay used so that it decreases the opacity of the actual image. This approach helps make the text more visible, but also it creates consistency in design, so no color stands out more than another one.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7816\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image10.png\" alt=\"Ikea website background image\" width=\"1000\" height=\"280\" \/><\/p>\n<h3><a href=\"http:\/\/lovingvincent.com\/\"><span style=\"font-weight: 400;\">Loving Vincent<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">One of my favorite movies, this one.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Background images lay behind a carousel that presents stories behind Vincent van Gogh and the movie. The background images seem to empower the story and deliver strong emotions.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7812\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image6-1.png\" alt=\"Loving Vincent website background image\" width=\"1000\" height=\"417\" \/><\/p>\n<h3><a href=\"https:\/\/uk.lush.com\/\"><span style=\"font-weight: 400;\">Lush<\/span><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">I so love how the Lush website looks: colorful and vibrant as the products themselves.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, background images can use patterns or shapes, like in this newsletter sign-up page example. These patterns manage to transform something potentially dull, into something cheerful.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7819\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image13.png\" alt=\"Background image for the Lush website\" width=\"1190\" height=\"878\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Parallax background images<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you look at the British Museum website, you\u2019ll notice that there are images across their pages, that lay in the background why the foreground content scrolls down. These are parallax background images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Parallax scrolling is one of those web design trends that manages to add a brilliant effect to a website if integrated correctly. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also obtain such an effect in WordPress, I\u2019m going to show you how a bit later.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to add background images to your WordPress website<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are three main ways of adding background images to your WordPress website. Let\u2019s check them out, shall we?<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3><span style=\"font-weight: 400;\">Adding background images via your WordPress theme Customizer<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Most popular WordPress themes have this option available. I\u2019m going to use the Colibri theme for the purpose of this example. Other themes behave similarly to the Colibri theme.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your chosen theme does not support the feature, skip to methods 2 and 3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s start by heading over to Appearance -&gt; Customize from the WordPress Dashboard. On the left you\u2019ll be seeing the theme\u2019s Customizer editing options, while on the right, there\u2019s a live preview of your website.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The theme allows you to place background images for:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rows<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Columns<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Blocks (entire website sections such as: about me, portfolio, team, contact, etc.)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Components (headings, carousels, pricing tables, carousels, etc.)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The way you can do this is the same no matter where you need your background image.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you want to add a background image to your services website block. Start by selecting the section. On the left you\u2019ll be seeing the editing options across a menu structured like below:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Layout<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Style\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced<img loading=\"lazy\" class=\"aligncenter wp-image-7814\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image8.png\" alt=\"Block editing options\" width=\"1000\" height=\"402\" \/><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Go to Style -&gt; Background type.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7813\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image7-1.png\" alt=\"Select background type\" width=\"340\" height=\"490\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Select \u201cImage\u201d. You\u2019ll now see an image that you can replace with your own. <img loading=\"lazy\" class=\"aligncenter size-full wp-image-7818\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image12.png\" alt=\"Select your desired image for the background\" width=\"334\" height=\"540\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you click on the image you\u2019ll be prompted to a screen where you can select an image from the WordPress media gallery, or you can upload another image.<img loading=\"lazy\" class=\"aligncenter wp-image-7810\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image4-1.png\" alt=\"Add an image from the Media Library\" width=\"800\" height=\"548\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">As you might have noticed already, you can even add a video as a background.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And, there\u2019s also a toggle option for the parallax effect!<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7809\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image3-1.png\" alt=\"add parallax effect to background image\" width=\"331\" height=\"375\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now, there\u2019s another shortcut to do this background image change. When you select a block from the right, you\u2019ll be seeing the settings icon. Click on it and you\u2019ll see some editing options.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you select \u201cChange background\u201d, you\u2019ll be directed inside \u201cStyle\u201d to proceed as described above.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7821\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image15.png\" alt=\"Other block settings\" width=\"800\" height=\"406\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This was all folks. Pretty easy, right?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, if your theme does not have the background image option, there\u2019s a way to do this in the WordPress default editor.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Adding a background image using WordPress blocks<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">From the WordPress dashboard, head over to \u201cPages\u201d. Now, select \u201cedit\u201d from beneath your desired page. You\u2019ll be seeing an interface as shown below.<img loading=\"lazy\" class=\"aligncenter wp-image-7820\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image14.png\" alt=\"The default WordPress editor\" width=\"900\" height=\"557\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">The default WordPress editor is block-based, meaning that each website section is made out of blocks. These blocks can be accessed from any \u201c+\u201d sign that you\u2019ll see in the interface. Let\u2019s click on the one in the upper-left.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7811\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image5-1.png\" alt=\"WordPress blocks\" width=\"305\" height=\"852\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, select the \u201cCover\u201d block. You&#8217;ll see it show up right away on your page.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7807\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image1-1.png\" alt=\"The cover block\" width=\"661\" height=\"512\" \/><\/p>\n<p><span style=\"font-weight: 400;\">You can upload an image that\u2019s locally stored on your computer or choose from the existing ones in the Media Library.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I selected an image from the Media Library. Now I can add some text to it. The editing options are quite limited here.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7817\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image11.png\" alt=\"Edit your WordPress image ackground\" width=\"800\" height=\"641\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If you select the cover you\u2019ll see a menu showing up above, where you can align your image, or duplicate your whole block. You can even save your block as a reusable one, to be used again in other designs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, on the right-hand side of the screen, you have some extra editing options.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inside media settings, if you toggle on the fixed background option, you\u2019ll activate the parallax effect.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When the toggle is off, you can adjust the focal point.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7823\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/ScreenRecording2021-06-04at04.29.06.44PM.gif\" alt=\"Adjusting the focal point of the background image in WordPress\" width=\"1124\" height=\"572\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">This focal point adjustment can be done also on a percentage basis, taking into account the width and height.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, you can add an overlay. You can choose its color and opacity.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7822\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image16.png\" alt=\"Adjust the color and opacity of the background overlay\" width=\"237\" height=\"304\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">And, you\u2019re kinda done.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Adding background images via WordPress plugins<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tags\/background-image\/\"><span style=\"font-weight: 400;\">Here<\/span><\/a><span style=\"font-weight: 400;\"> are some WordPress plugins tagged as background image plugins. I\u2019m going to play a bit with the Simple Full-Screen Background Image plugin because it has the most installs and the best reviews so far.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, here\u2019s a tutorial on how to install a WordPress plugin.<\/span><\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to Install, Deactivate and Work with WordPress Plugins\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/tRmW1Texk3k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">With this plugin, images will be automatically scaled with the browser, so regardless of the browser size, the image will always fill the screen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All you have to do is go to Appearance -&gt; Fullscreen BG Image. From here select your image.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7815\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image9.png\" alt=\"Choose the background image using a WordPress plugin\" width=\"650\" height=\"453\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When you hit \u201cSave Options\u201d, you will see that all the sections on your site, without a background, will receive this image as a background.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, this is what\u2019s happening in the free version. It\u2019s pretty basic and not at all flexible. The paid plan comes with extra options such as:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unlimited background images<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Post \/ page-specific background images<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Multiple images with fade transitions on pages<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">And, we\u2019re done, you\u2019ve just found out the 3 methods you can use to add background images to your WordPress site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s one more thing I want you to know before we can call it a day.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Image sizes\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before you upload any image on your site, pay attention to its size. I know we all look at megapixels, but, on the web, there\u2019s a catch. High-resolution images can hurt your site by affecting its loading time. In the long term, any extra loading second might lose you website visitors and conversions. Also, you\u2019ll significantly decrease your chances to rank in search engines, because age speed is an important ranking factor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the other hand, using images that are too small, can hurt your user experience as well. So, we need to make ends meet.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One way of doing this is by using external apps that can help you resize your images while ensuring proper clarity.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But in WordPress, you can do this easily using a&#8230;plugin, as you might have already guessed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here, at Colibri, we are <\/span><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\"><span style=\"font-weight: 400;\">Smush<\/span><\/a><span style=\"font-weight: 400;\"> fans. Smush can and will compress images without a visible drop in quality.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7808\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/image2-1.png\" alt=\"Smush optimizes imagez\" width=\"900\" height=\"417\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the pro version, it will also convert images to WebP, a next-gen image format that can compress image file sizes up to 35%, with no obvious quality loss.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And that\u2019s a wrap, folks!<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">If you liked this article, and you want to learn more about how to<\/span><a href=\"https:\/\/colibriwp.com\/\"> <span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to Colibri&#8217;s<\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"> <span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and<\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"> <span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">[sibwp_form id=1]<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m gonna keep this intro really short. Here&#8217;s what we\u2019re going to discuss in this article: What are background images What\u2019s the thing with parallax backgrounds? How to add background images to your WordPress website How to approach image size in WordPress Ready, steady? Let\u2019s go! &nbsp; What are background images? Background images are images&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":7806,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[277],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a WordPress Background Image to Any Web Page<\/title>\n<meta name=\"description\" content=\"We&#039;ve got 3 methods for you for adding background images to your WordPress site. Also, we&#039;re tackling parallax backgrounds and image size. Read on!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-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 Add a WordPress Background Image to Any Web Page\" \/>\n<meta property=\"og:description\" content=\"We&#039;ve got 3 methods for you for adding background images to your WordPress site. Also, we&#039;re tackling parallax backgrounds and image size. Read on!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-05T14:33:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-04T15:00:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"2000\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg\",\"width\":3000,\"height\":2000,\"caption\":\"WordPress background images\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/\",\"name\":\"How to Add a WordPress Background Image to Any Web Page\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#primaryimage\"},\"datePublished\":\"2021-07-05T14:33:23+00:00\",\"dateModified\":\"2021-06-04T15:00:45+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"We've got 3 methods for you for adding background images to your WordPress site. Also, we're tackling parallax backgrounds and image size. Read on!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add a WordPress Background Image to Any Web Page\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a WordPress Background Image to Any Web Page","description":"We've got 3 methods for you for adding background images to your WordPress site. Also, we're tackling parallax backgrounds and image size. Read on!","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:\/\/colibriwp.com\/blog\/wordpress-background-images\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a WordPress Background Image to Any Web Page","og_description":"We've got 3 methods for you for adding background images to your WordPress site. Also, we're tackling parallax backgrounds and image size. Read on!","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-07-05T14:33:23+00:00","article_modified_time":"2021-06-04T15:00:45+00:00","og_image":[{"width":3000,"height":2000,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/06\/5243028.jpg","width":3000,"height":2000,"caption":"WordPress background images"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/","name":"How to Add a WordPress Background Image to Any Web Page","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#primaryimage"},"datePublished":"2021-07-05T14:33:23+00:00","dateModified":"2021-06-04T15:00:45+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"We've got 3 methods for you for adding background images to your WordPress site. Also, we're tackling parallax backgrounds and image size. Read on!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-background-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-background-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add a WordPress Background Image to Any Web Page"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7804"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=7804"}],"version-history":[{"count":3,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7804\/revisions"}],"predecessor-version":[{"id":7826,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7804\/revisions\/7826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/7806"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=7804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=7804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=7804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}