{"id":89229,"date":"2023-12-21T15:00:00","date_gmt":"2023-12-21T13:00:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=89229"},"modified":"2023-12-21T15:00:00","modified_gmt":"2023-12-21T13:00:00","slug":"background-image-in-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/background-image-in-wordpress\/","title":{"rendered":"How to Set a Background Image in WordPress (In 4 Ways)"},"content":{"rendered":"\n

Adding a background image in WordPress is a simple process. The Content Management System (CMS) gives you multiple ways to do this, depending on how you want to build your website. Understanding each approach will enable you to decide which method you want to use.<\/p>\n\n\n\n\n\n\n\n

You can add a background image using the Block Editor, the customizer, and even page builder plugins. The process is fairly similar in most cases and it shouldn’t take you more than a few minutes. \ud83d\udd52<\/p>\n\n\n\n

In this article, we’ll go over each way to add a background image and show you how they work. \ud83d\udcbb Let’s get to it!<\/p>\n\n\n\n

\ud83d\udcda Table of contents<\/strong>:<\/p>\n\n\n\n

    \n
  1. Add a background image using the Block Editor<\/a><\/li>\n\n\n\n
  2. Use the customizer<\/a><\/li>\n\n\n\n
  3. Add a background image using the Full Site Editor<\/a><\/li>\n\n\n\n
  4. Use a page builder plugin<\/a><\/li>\n<\/ol>\n\n\n\n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tLearn how to set a background image \ud83d\uddbc\ufe0f in #WordPress \ud83e\udd14<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n
    <\/div>\n\n\n\n

    1. Add a background image using the Block Editor \ud83c\udfac<\/h2>\n\n\n\n

    The Block Editor<\/a> makes it easy to add background images in WordPress with other elements set over them. In the editor, these sections are called Cover<\/em><\/strong> blocks<\/a>.<\/p>\n\n\n\n

    You can add Cover<\/em><\/strong> blocks anywhere on a page or a post. What you can’t do is set covers for other blocks. That means you need to start with the Cover<\/em><\/strong> block and then add other elements on top of it.<\/p>\n\n\n\n

    To add the background image, select the Cover<\/em><\/strong> block and choose the source of the image. You can upload a new one, use a file from the media library, or use the page\/post’s featured image:<\/p>\n\n\n

    \n
    \"Add<\/figure><\/div>\n\n\n

    Once you select an image, the editor will ask you to add the text you want to display over it. You can also choose not to set any text and add other blocks instead.<\/p>\n\n\n

    \n
    \"An<\/figure><\/div>\n\n\n

    When the background image is ready, you can click on the plus sign icon<\/em><\/strong> inside of it to add other blocks. These blocks will display over the background image and you can customize them as normal.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. Use the customizer \ud83d\uddb1\ufe0f<\/h2>\n\n\n\n

    Depending on which theme you use, you’ll have access to either the customizer or Full Site Editing. If you can access the customizer, it offers the simplest way to set up background images for entire pages and posts.<\/p>\n\n\n\n

    To do this, open the customizer<\/a> and select Background<\/strong><\/em> from the navigation menu to the left. Now you’ll see options to set a background color or an image. Click on Select image<\/em><\/strong> and choose the file you want to use:<\/p>\n\n\n

    \n
    \"Customizer<\/figure><\/div>\n\n\n

    Note that choosing a background image for a full page can be challenging. We recommend using images that don’t distract too much from the content of the page or make it hard to interact with it.<\/p>\n\n\n

    \n
    \"Customizer<\/figure><\/div>\n\n\n

    After you add a background image, the customizer will let you decide whether to have it fit the page size or repeat the image. You can also use the Image Position<\/em><\/strong> controls in the menu to the left to move the image so it fits the design better.<\/p>\n\n\n

    <\/div>\n\n\n\n

    3. Add a background image using the Full Site Editor \u2699\ufe0f<\/h2>\n\n\n\n

    If you’re using a theme that supports Full Site Editing<\/a>, the process for adding a background image is somewhat different. To start, go to Appearance<\/strong> \u2192 Editor<\/strong><\/em>. Once inside, you can edit pages or templates and add background images to them.<\/p>\n\n\n\n

    In this example, we’re editing the Neve FSE<\/a> homepage template. The Full Site Editor doesn’t include an option to set a background image per se. However, since it uses the Block Editor, you can use the Cover<\/strong><\/em> block to add background images anywhere you want on a page.<\/p>\n\n\n

    \n
    \"FSE<\/figure><\/div>\n\n\n

    This approach makes sense if you want to add background images to theme templates or modify existing ones. If you just need to add background images to specific posts, it makes more sense to use the Block Editor as usual.<\/p>\n\n\n

    <\/div>\n\n\n\n

    4. Use a page builder plugin\ud83c\udfd7\ufe0f <\/h2>\n\n\n\n

    This process of adding a background image will vary depending on what page builder you use. There are a lot of amazing page builder plugins<\/a> for WordPress and each of them provides a unique experience.<\/p>\n\n\n\n

    To give you an example, let’s see how the process works with Elementor<\/a>. If you open the Elementor editor and select a container, you can jump to the Style<\/em><\/strong> tab, set the background type to Classic<\/em><\/strong> and use the Image<\/em><\/strong> option to select an image file:<\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    You can upload an image or use an existing one from the media library. Elementor<\/a> also includes an AI tool that enables you to generate images with prompts and you can use it to create new background images.<\/p>\n\n\n\n

    To do that, click on the Create with AI<\/strong> <\/em>button over the image selector. This will open a new window where you can enter a prompt for the image:<\/p>\n\n\n

    \n
    \"Creating<\/figure><\/div>\n\n\n

    When you’re done, remember to save the changes to the page and close the Elementor editor. That’s it!<\/p>\n\n\n

    Go to top<\/a><\/div>\n\n\n\n

    Conclusion \ud83e\uddd0<\/h2>\n\n\n\n
    \n
    \n

    Just as with anything else you want to do in WordPress, the CMS gives you lots<\/em> of options on how to add background images. What approach you take will depend on where you want to add the images and to which pages, as well as what theme you’re using.<\/p>\n<\/div>\n\n\n\n

    \n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tLearn how to set a background image \ud83d\uddbc\ufe0f in #WordPress \ud83e\udd14<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

    \ud83c\udfdc\ufe0f If you want to add a background image in WordPress, these are your four options:<\/p>\n\n\n\n

      \n
    1. Add a background image using the Block Editor \ud83c\udfac<\/li>\n\n\n\n
    2. Use the customizer \u2699\ufe0f<\/li>\n\n\n\n
    3. Add a background image using the Full Site Editor \ud83d\uddb1\ufe0f<\/li>\n\n\n\n
    4. Use a page builder plugin \ud83c\udfd7\ufe0f<\/li>\n<\/ol>\n\n\n\n

      Do you have any questions about how to add a background image in WordPress? Let’s talk about them in the comments section below!<\/em><\/strong><\/p>\n\n\n