{"id":131264,"date":"2014-08-10T11:30:00","date_gmt":"2014-08-10T15:30:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=131264"},"modified":"2022-04-01T01:56:55","modified_gmt":"2022-04-01T01:56:55","slug":"how-to-properly-add-background-images-to-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-properly-add-background-images-to-your-wordpress-site\/","title":{"rendered":"How To Properly Add Background Images To Your WordPress Site"},"content":{"rendered":"<p>Adding a background image to your WordPress site is easy. Right?<\/p>\n<p>For the most part, yes. Unless your theme doesn\u2019t support it. Truth is, many WordPress themes today have quick and easy settings for adding or changing an existing background image. As do the default WP appearance customizations.<\/p>\n<p>You can also change the background using CSS or through various plugins, opening up options for setting a background image on pages, posts, and categories.<\/p>\n<p>In this article we&#8217;ll show you how to do all the above, and make your site stand out with an eye-catching look of your own choosing.<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#post-1092-_nouwj3i34016\">Add a Background Image Using The Default WordPress Customizations<\/a><\/li>\n<li><a href=\"#post-1092-_qolmurod0g80\">Add a Background Image Using a Plugin<\/a><\/li>\n<li><a href=\"#post-1092-_9mub46ucjeuh\">Add a Background Image Using CSS<\/a>\n<ul>\n<li><a href=\"#post-1092-_ig0dhqpn0ryg\">Site-wide Background Image<\/a><\/li>\n<li><a href=\"#post-1092-_ydn2nr4vv7dy\">Specific Category Background Image<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#post-1092-_478wjibld5ad\">Add a Background Image To Specific Areas<\/a><\/li>\n<li><a href=\"#post-1092-_s6ats54h61r1\">Back(ground) to Basics<\/a><\/li>\n<\/ul>\n<p>Why change your background? Well, the image your theme defaults to might not appeal to you, or feel like it jives with your branding. Or, maybe it\u2019s not an image at all, just colors. Or perhaps you loved the image originally, but you\u2019ve gotten bored with it.<\/p>\n<p>Whatever the reason, let\u2019s experiment with changing it.<\/p>\n<h2><a id=\"post-1092-_nouwj3i34016\" target=\"_blank\"><\/a>Add a Background Image Using The Default WordPress Customizations<\/h2>\n<p>WordPress themes can have a colored background or default photo in the background. Most people choose to replace these with an image and\/or colors that better suit their taste and site branding.<\/p>\n<p>To add a background image in the default WordPress editor, you\u2019ll need to follow these steps:<\/p>\n<ul>\n<li>From the WP dashboard, go to <strong>Appearance &gt; Customize &gt; Background Image <\/strong>or <strong>Appearance &gt; Background\/Background Image<\/strong>.<\/li>\n<li>Click on the <strong>Select Image<\/strong> button to open your Media Library.<\/li>\n<li>Choose desired image, either by uploading from your computer or by selecting one from your media library.<\/li>\n<li>Once you have the image you want selected, click on the blue <strong>Choose image<\/strong> button.<\/li>\n<li>In the top window of the left-side menu, you\u2019ll see your selection populate. To the right, you\u2019ll see a full-size preview of your sites\u2019 home page, with the background image.<\/li>\n<\/ul>\n<p>If you like what you see, click the blue <strong>Publish <\/strong>button in the upper right hand corner, and you\u2019re done!<\/p>\n<p>If you want to change the way it looks before finalizing, there are a number of settings and options you can play with to find your preferred look.<\/p>\n<figure id=\"attachment_203321\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-203321\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/001-default-WP-bkgrnd-settings.png\" alt=\"Default WP background settings\" width=\"1511\" height=\"747\" \/><figcaption class=\"wp-caption-text\">The Repeat option is best used on patterns that are made to exactly align, not photos.<\/figcaption><\/figure>\n<p>The background image menu editing tools, along with their associated options, are as follows:<\/p>\n<ul>\n<li>Preset\n<ul>\n<li>Default, Fill Screen, Fit to Screen, Repeat, Custom<\/li>\n<\/ul>\n<\/li>\n<li>Image Position\n<ul>\n<li>Center, Top Right, Middle Right, Bottom RIght, Middle Bottom, Top Left, Middle Left, Bottom Left, Middle Top<\/li>\n<\/ul>\n<\/li>\n<li>Image Size\n<ul>\n<li>Original, Fit to Screen, Fill Screen<\/li>\n<\/ul>\n<\/li>\n<li>Repeat Background Image \u2013 checkbox<\/li>\n<li>Scroll with Page \u2013 checkbox<\/li>\n<\/ul>\n<p>Play around with the editing tools to see what size, pattern, and position you like best. Selecting any of the dropdown options from the submenus will give you the resultant preview of your page on the right.<\/p>\n<p>Don\u2019t worry about being stuck with anything. It\u2019s easy to go back in settings and change the background image (and related options) anytime you like.<\/p>\n<h2><a id=\"post-1092-_qolmurod0g80\" target=\"_blank\"><\/a>Add a Background Image Using a Plugin<\/h2>\n<p>There are several plugins on WordPress.org that accomplish the task of adding background images.<\/p>\n<p>To name a few: <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\" target=\"_blank\">Advanced WordPress Backgrounds<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/fully-background-manager\/\" target=\"_blank\">Full Background Manager<\/a>, and <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\" target=\"_blank\">Simple Full Screen Background Image<\/a>.<\/p>\n<p>The latter is my favorite of the bunch, so that\u2019s what I\u2019ll be using for this tutorial.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-203322 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/002-simple-full-screen-background-image-plugin-1050x348.png\" alt=\"simple fullscreen background image plugin banner\" width=\"1050\" height=\"348\" \/><\/p>\n<p><strong>Simple Full Screen Background Image<\/strong> provides easy install and setup of a full screen image as the background of your website. It scales images automatically with the browser, which means the image always fills the screen.<\/p>\n<p>Putting it into action requires only a few simple steps. There is a paid\/pro version available that adds other features, but the free version is all we need for this exercise.<\/p>\n<p>Let\u2019s use the plugin now to add a full screen background image.<\/p>\n<ol>\n<li>Install &amp; activate the <em>Simple Full Screen Background Image<\/em> plugin.<\/li>\n<li>From the WP dashboard, go to <strong>Appearance &gt; Fullscreen Background Image<\/strong>.<\/li>\n<li>Choose desired image, either by uploading from your computer or by selecting one from your media library.<\/li>\n<li>Once you have the image you want selected, click on the blue <strong>Use Image<\/strong> button.<\/li>\n<li>Click on the blue <strong>Save Options<\/strong> button, and check out your site.<\/li>\n<\/ol>\n<figure id=\"attachment_203323\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203323\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/003-full-screen-background-image-1050x536.png\" alt=\"full screen background image preview\" width=\"1050\" height=\"536\" \/><figcaption class=\"wp-caption-text\">A page preview after selecting an image in <strong>Fullscreen Background Image<\/strong>.<\/figcaption><\/figure>\n<p>There you have it! The image should now be showing on your site as a full screen background image.<\/p>\n<p>I wanted to mention this plugin\u2019s settings for background image overrides the default WP customize background settings. This isn\u2019t a bad thing, just something to note.<\/p>\n<p>Setting a background image for single posts, pages, categories, tags, and more with this particular plugin is possible, but will require purchasing the <a href=\"https:\/\/fullscreenbackgroundimages.com\/?ref=318\" target=\"_blank\">pro version<\/a>.<\/p>\n<h2><a id=\"post-1092-_9mub46ucjeuh\" target=\"_blank\"><\/a>Add a Background Image Using CSS<\/h2>\n<p>Now we&#8217;re going to explore how to change the background image using CSS code. This can be done to make a background that is site-wide or for a specific category\u2015using the WP theme customizer.<\/p>\n<figure id=\"attachment_203324\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203324\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/004-wp-default-customize-adding-CSS-1050x499.png\" alt=\"WP default customize adding CSS\" width=\"1050\" height=\"499\" \/><figcaption class=\"wp-caption-text\">The default WP customization <strong>Additional CSS<\/strong> input menu.<\/figcaption><\/figure>\n<ol>\n<li>From your WordPress dashboard, navigate to <strong>Appearance &gt; Customize<\/strong>.<\/li>\n<li>Scroll down and click on <strong>Additional CSS<\/strong>.<\/li>\n<li>Paste the appropriate code in the CSS field as follows:<\/li>\n<\/ol>\n<h3><a id=\"post-1092-_ig0dhqpn0ryg\" target=\"_blank\"><\/a>Site-wide Background Image:<\/h3>\n<div class=\"gist\" data-gist=\"323116c6a2b8c0123031df725076be2d\" data-gist-file=\"site-wide-background.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/323116c6a2b8c0123031df725076be2d.js?file=site-wide-background.css\">Loading gist 323116c6a2b8c0123031df725076be2d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Make sure to replace the holder text for \u201c<strong><em>imageURL<\/em><\/strong>\u201d in the code with the actual name of the image file URL. To see this, select any image in your Media Library and look at the image information on the right side of the screen.<\/p>\n<figure id=\"attachment_203325\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-203325\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/005-media-library-copy-to-clipboard.png\" alt=\"Media library copy to clipboard\" width=\"1023\" height=\"298\" \/><figcaption class=\"wp-caption-text\">Click on the <strong>Copy URL to clipboard<\/strong> button to use for pasting in the CSS code.<\/figcaption><\/figure>\n<h3><a id=\"post-1092-_ydn2nr4vv7dy\" target=\"_blank\"><\/a>Specific Category Background Image:<\/h3>\n<div class=\"gist\" data-gist=\"b5ec07658945233270289ae7c5503cd0\" data-gist-file=\"category-background.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/b5ec07658945233270289ae7c5503cd0.js?file=category-background.css\">Loading gist b5ec07658945233270289ae7c5503cd0<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Make sure to replace two holder text areas in the above code:<\/p>\n<ul>\n<li>The actual name of the image file URL for \u201c<strong><em>imageURL<\/em><\/strong>\u201d<\/li>\n<li>A valid category name for <strong>catname<\/strong><\/li>\n<\/ul>\n<p>To find the category name:<\/p>\n<ol>\n<li>Navigate to your WordPress site dashboard<\/li>\n<li>Click on <strong>Posts &gt; Categories<\/strong><\/li>\n<li>Choose the category you want to reference, and hover over the \u201c<strong>Edit<\/strong>\u201d link for it; you will see the URL at the bottom left of the page, which shows the category ID<\/li>\n<\/ol>\n<figure id=\"attachment_203326\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203326\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/006-category-ID-1050x208.png\" alt=\"Category ID\" width=\"1050\" height=\"208\" \/><figcaption class=\"wp-caption-text\">In this case, the category ID would be 428.<\/figcaption><\/figure>\n<p>Do keep in mind that this is hard coded, so it is possible certain plugins won\u2019t lazy load the image, or be able to index it to CDN.<\/p>\n<h2><a id=\"post-1092-_478wjibld5ad\" target=\"_blank\"><\/a>Add a Background Image To Specific Areas<\/h2>\n<p>There is another nice plugin that will assist in adding background images to specific content areas.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-ratio-full wp-image-203327\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/007-AWB-plugin-1050x345.png\" alt=\"AWB plugin banner\" width=\"1050\" height=\"345\" \/><\/div>\n<\/div>\n<p>The <strong>Advanced WordPress Backgrounds<\/strong> plugin for WordPress allows adding backgrounds using Gutenberg blocks. You can set a color, an image, or even a video as a background, and these can be viewed on mobile devices.<\/p>\n<p>It also allows adding a parallax effect to background images and videos.<\/p>\n<p>In this instance, we\u2019re just going to add a static background image to a content area, specifically, a Post.<\/p>\n<p>Because this works with Gutenberg blocks, you will need to use the Gutenberg editor, so make sure to switch from Classic Editor mode if you need to.<\/p>\n<p>After the plugin is installed and activated, navigate to the WordPress dashboard.<\/p>\n<p>1. Click on <strong>Post &gt; Add New<\/strong>.<\/p>\n<p>2. Click the plus sign <strong>+ <\/strong>button, scroll down to the <em>Design <\/em>section, and click on the <strong>AWB <\/strong>block.<\/p>\n<p>The tool bars for any editing we want to do are located in two areas: the top icon bar, and the side menu column.<\/p>\n<p>3. From either menu (I prefer using the side column one), click on the <strong>Image <\/strong>bar at the top (between <strong>Color <\/strong>&amp; <strong>Video<\/strong>), then click on the blue <strong>Select Image<\/strong> button beneath it, and it will open your Media Library.<\/p>\n<p>4. Select the image you want, then click the blue <strong>Select <\/strong>button.<\/p>\n<p>Once you have done that, you should see that the image is now part of the AWB block. (If you don\u2019t see it, click on the picture icon from the AWB icon bar and it should pop into view.)<\/p>\n<figure id=\"attachment_203328\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203328\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/008-awb-editing-tools-1050x556.png\" alt=\"AWB editing tools\" width=\"1050\" height=\"556\" \/><figcaption class=\"wp-caption-text\">The AWB plugin has two separate menu areas for editing.<\/figcaption><\/figure>\n<p>Using the menu settings, you can change the image&#8217;s position (based on the indicator on the axes), the size, spacings, etc. I left the percentage settings at the default 50\/50 (which puts it directly in the middle), and the size defaults of Full and Cover.<\/p>\n<p>So now that we have our post background, we need to add the actual post content\/text.<\/p>\n<p>1. Click on the plus sign <strong>+ <\/strong>button located in the block <em>on top of the background image<\/em>.<\/p>\n<p>2. Click on the <strong>Paragraph <\/strong>icon, which will add a text block on top of our background image.<\/p>\n<figure id=\"attachment_203329\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203329\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/009-adding-paragraph-to-image-bkgrnd-block-in-AWB-1050x339.png\" alt=\"Adding paragraph to image background block\" width=\"1050\" height=\"339\" \/><figcaption class=\"wp-caption-text\">\u201cStacking\u201d blocks is possible in <strong>AWB<\/strong>; you can put text on top of a background image.<\/figcaption><\/figure>\n<p>Type your text content, then change the alignment or text color if desired (I did, but it\u2019s optional), and voila! We have a post with its own individual background image.<\/p>\n<figure id=\"attachment_203330\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203330\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/010-post-w-bkgrnd-image-using-awb-plugin-1050x825.png\" alt=\"Post with background image using AWB plugin\" width=\"1050\" height=\"825\" \/><figcaption class=\"wp-caption-text\">The AWB plugin lets you create a post with a background image, independent of the page.<\/figcaption><\/figure>\n<figure id=\"attachment_203331\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-203331\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/08\/011-post-w-bkgrnd-image-paragraph-blocks-using-awb-plugin-1050x707.png\" alt=\"Post with background image paragraph blocks\" width=\"1050\" height=\"707\" \/><figcaption class=\"wp-caption-text\">Multiple text blocks with a combo background image\/text block in between.<\/figcaption><\/figure>\n<p>You can make it so just a section of your post has the background image, which gives it some oomph. Just add additional Paragraph blocks before and after the background image one.<\/p>\n<p>Pretty cool.<\/p>\n<h2><a id=\"post-1092-_s6ats54h61r1\" target=\"_blank\"><\/a>Back(ground) to Basics<\/h2>\n<p>Adding backgrounds to your WordPress site may seem like a small thing. But if done properly, it can make a big impact. It can also help keep your online presence fresh, so visitors don\u2019t get bored always seeing the same pictures over and over again.<\/p>\n<p>It\u2019s ideal to use the built in customization of a theme\u2019s functionality for adding background images when it exists, as it\u2019s specifically designed to work as coded.<\/p>\n<p>However, you do have other options when it comes to putting WordPress background images in place. WP core customization, plugins, page builders, and CSS tweaks, all make it possible to get fine-tuned control over what images are used, and where.<\/p>\n<p>So go ahead, and get creative with your backgrounds. Make a thematic impact, and keep your visitors visually engaged.<\/p>\n<p>&nbsp;<\/p>\n<p><em><strong>Editor\u2019s Note:<\/strong><\/em><em> This post has been updated for accuracy and relevancy.<br \/>\n[Originally Published: August 2014 \/ Revised: November 2021]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add visual punch to your WordPress site with fine-grained control over displaying background images on your homepage, category listings and individual posts.<\/p>\n","protected":false},"author":915455,"featured_media":203320,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[16,9798],"tutorials_categories":[],"class_list":["post-131264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-images","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/915455"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=131264"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131264\/revisions"}],"predecessor-version":[{"id":203332,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131264\/revisions\/203332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/203320"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=131264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=131264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=131264"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=131264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}