WordPress background image css

How To Properly Add Background Images To Your WordPress Site

Adding a background image to your WordPress site is easy. Right?

For the most part, yes. Unless your theme doesn’t 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.

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.

In this article we’ll show you how to do all the above, and make your site stand out with an eye-catching look of your own choosing.

Continue reading, or jump ahead using these links:

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’s not an image at all, just colors. Or perhaps you loved the image originally, but you’ve gotten bored with it.

Whatever the reason, let’s experiment with changing it.

Add a Background Image Using The Default WordPress Customizations

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.

To add a background image in the default WordPress editor, you’ll need to follow these steps:

• From the WP dashboard, go to Appearance > Customize > Background Image or Appearance > Background/Background Image.
• Click on the Select Image button to open your Media Library.
• Choose desired image, either by uploading from your computer or by selecting one from your media library.
• Once you have the image you want selected, click on the blue Choose image button.
• In the top window of the left-side menu, you’ll see your selection populate. To the right, you’ll see a full-size preview of your sites’ home page, with the background image.

If you like what you see, click the blue Publish button in the upper right hand corner, and you’re done!

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.

The background image menu editing tools, along with their associated options, are as follows:

• Preset
  • Default, Fill Screen, Fit to Screen, Repeat, Custom
  • Center, Top Right, Middle Right, Bottom RIght, Middle Bottom, Top Left, Middle Left, Bottom Left, Middle Top
  • Original, Fit to Screen, Fill Screen

  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.

  Don’t worry about being stuck with anything. It’s easy to go back in settings and change the background image (and related options) anytime you like.

  Add a Background Image Using a Plugin

  There are several plugins on WordPress.org that accomplish the task of adding background images.

  The latter is my favorite of the bunch, so that’s what I’ll be using for this tutorial.

  

  Simple Full Screen Background Image 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.

  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.

  Let’s use the plugin now to add a full screen background image.

  

  1. Install & activate the Simple Full Screen Background Image plugin.
  2. From the WP dashboard, go to Appearance > Fullscreen Background Image.
  3. Choose desired image, either by uploading from your computer or by selecting one from your media library.
  4. Once you have the image you want selected, click on the blue Use Image button.
  5. Click on the blue Save Options button, and check out your site.

  There you have it! The image should now be showing on your site as a full screen background image.

  I wanted to mention this plugin’s settings for background image overrides the default WP customize background settings. This isn’t a bad thing, just something to note.

  Setting a background image for single posts, pages, categories, tags, and more with this particular plugin is possible, but will require purchasing the pro version.

  Add a Background Image Using CSS

  Now we’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―using the WP theme customizer.

  

  1. From your WordPress dashboard, navigate to Appearance > Customize.
  2. Scroll down and click on Additional CSS.
  3. Paste the appropriate code in the CSS field as follows:

  Site-wide Background Image:

  Make sure to replace the holder text for “imageURL” 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.

  

  Specific Category Background Image:

  Make sure to replace two holder text areas in the above code:

  • The actual name of the image file URL for “imageURL”
  • A valid category name for catname

  To find the category name:

  

  1. Navigate to your WordPress site dashboard
  2. Click on Posts > Categories
  3. Choose the category you want to reference, and hover over the “Edit” link for it; you will see the URL at the bottom left of the page, which shows the category ID

  Do keep in mind that this is hard coded, so it is possible certain plugins won’t lazy load the image, or be able to index it to CDN.

  Add a Background Image To Specific Areas

  There is another nice plugin that will assist in adding background images to specific content areas.

  

  The Advanced WordPress Backgrounds 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.

  It also allows adding a parallax effect to background images and videos.

  In this instance, we’re just going to add a static background image to a content area, specifically, a Post.

  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.

  After the plugin is installed and activated, navigate to the WordPress dashboard.

  1. Click on Post > Add New.

  2. Click the plus sign + button, scroll down to the Design section, and click on the AWB block.

  The tool bars for any editing we want to do are located in two areas: the top icon bar, and the side menu column.

  3. From either menu (I prefer using the side column one), click on the Image bar at the top (between Color & Video), then click on the blue Select Image button beneath it, and it will open your Media Library.

  4. Select the image you want, then click the blue Select button.

  Once you have done that, you should see that the image is now part of the AWB block. (If you don’t see it, click on the picture icon from the AWB icon bar and it should pop into view.)

  

  Using the menu settings, you can change the image’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.

  So now that we have our post background, we need to add the actual post content/text.

  1. Click on the plus sign + button located in the block on top of the background image.

  2. Click on the Paragraph icon, which will add a text block on top of our background image.

  

  Type your text content, then change the alignment or text color if desired (I did, but it’s optional), and voila! We have a post with its own individual background image.

  

  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.

  Back(ground) to Basics

  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’t get bored always seeing the same pictures over and over again.

  It’s ideal to use the built in customization of a theme’s functionality for adding background images when it exists, as it’s specifically designed to work as coded.

  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.

  So go ahead, and get creative with your backgrounds. Make a thematic impact, and keep your visitors visually engaged.

  Editor’s Note: This post has been updated for accuracy and relevancy.
  [Originally Published: August 2014 / Revised: November 2021]

  Have you changed your background image in WordPress? If so, what method did you use? Let us know in the comments below.

  Janette Burhans Janette Burhans is a content creator at WPMU DEV, who writes blog articles and the weekly WhiP & Roundup emails. Her professional career as an author and artist spans over two decades, half of those in the world of WordPress. Her writing has been featured in Glamour magazine, and her personal blog, Platinum Pink. Connect with Janette on Twitter.

  Источник