How To Add Background Image In Block Editor: Gutenberg Tutorial
You can give your WordPress website an eye-catching appearance just by adding an interactive image as background. And, in Gutenberg editor, adding background images is super simple if you know how! Today we will guide you to add background image in block editor without coding.
Gutenberg editor is the default editor for WordPress for a couple of years. And it’s becoming popular too. But one common struggle most users face is when they try to add background image in the Gutenberg editor or other customizations. We will try our best to provide in-depth, no code guidelines to add background images in block editor. Let’s get started.
Amazing Web Design Flexibility In Gutenberg
In order to provide flexibility in creating and managing posts, a Gutenberg block editor was developed. It is serving its purpose outstandingly. Additionally, the Gutenberg editor is growing in such a way that it provides so many customization.
🌟 You will get advanced navigation in the list view so that you can manage all your blocks, update them, etc. It helps you to design and arrange blocks with ease.
🌟 For each block, by default Gutenberg provides size, color, alignment customization, background color, etc. Using these, you can give your pages & posts a stunning look.
🌟 Get support from the popular Gutenberg library to get exclusively designed blocks for decorating your site more easily.
🌟 Moreover, by default Gutenberg provides HTML anchor section for each block, by which you can add custom design markups seamlessly.
How To Add Background Image In Block Editor? [3 Ways]
Though you can add versatile color pallets for your pages & posts, you can’t add background images. If you look closely at Gutenberg settings, then you will see, you can create groups combining multiple blocks. So if you want to add a background image for a single block, a section, or an entire page, there will be different processes.
Depending on these, we have added a Gutenberg tutorial for adding background images in 3 different ways.
1. Guide To Add Background Image For A Section
As we mentioned earlier, you can merge multiple blocks into a group and make a section. It can be a hero section, call to action section, service section, and many more. By default, you can use a common background color for grouped blocks.
If you are using the Essential Blocks For Gutenberg plugin, then using its Wrapper block, you can easily add background images, overlay, etc. Here is the guideline:
Add Background Image Through Essential Blocks Wrapper
First, install and activate Essential blocks on your WordPress website, if you don’t have them already. Then enable the ‘Wrapper’ block. Now, by clicking the ‘+’ icon and add the Wrapper block on your page. Add as many blocks as you want. Then go to Settings tab → Style → Background. From there you will find a field to add a background image.
This is how easily you can add background images for sections without coding in the Gutenberg block editor. To check out the detailed guideline, read here. 👇
Use Images In Background For Rows
Alternatively, you can add background images for a single row from the Block editor. To do this, Essential Blocks plugin’s Row block is the most suitable one. With the help of this block, you can add images in the background for single rows and make your website more catchy. To learn more, follow the link below. 👇
Add Background Image Through Default Cover Block
Among Gutenberg’s default blocks, only the Cover block supports background images. So using this block you can easily add images in the Background. This Cover block is best suited for creating a Call-to-action section, an interactive text section, etc.
To add the section’s background image with the Cover block, click on the ‘+’ sign from your page. Then search for Cover and add it. It will instruct you to upload an image or use it from the Media library. You can also customize the background image position, alignment, etc, from here. You can also use other blocks as nested in the Cover block.
With your own creativity, you can use this Cover block for versatile purposes and give a stunning look to your website.
2. Use Background Image For The Entire Page
By default, you can’t add background images for pages or posts in Gutenberg. But to add background images for the entire page, you can again take help from Essential Blocks Wrapper block. You can create one single container with this block and then add all other blocks and sections under it. Then as a whole, you can add background images or customize them easily.
3. Use Image In The Background Of A Block
Suppose, you don’t need to use background images for a section or page, only a particular block. What to do? Gutenberg block editor only provides background colors for blocks, not images. Let’s check out how you can do it.
The good news is that you can add background images for separate blocks if you are using them from the Essential Blocks library. All the image-supportive blocks of this Gutenberg library have built-in background image-adding options. So, you don’t have to add custom markups to add a background image for a particular block.
For tutorial purposes, let’s choose the Info Box block. To add a background image for this single block, go to Settings → Advanced → Background. Enable the ‘Overlay’ option to add a background image. This background image support you will also get for Interactive Promo, Call To Action, Toggle, Accordion, etc popular blocks of Essential Blocks.
Best Places To Find Background Images For Your WordPress Site
Now the concern is where to find stunning images to use as background. If you want to stay hassle-free, then the best option is to go for royalty-free images, free copyright images, free stock photos, etc. In this way, you can get stunning background images for free.
Here is the list of popular free image sources you can check out:
- Openverse – Get 600 million+ free creative works.
- Unsplash – Free image library and no credit is necessary.
- Pexels – A free photo collection site without attribution.
- Pixabay – Fast, free, without attribution for most images.
- iStockphoto – Provides royalty-free images for a relatively low price.
- Shutterstock – offers royalty-free images for a reasonable monthly subscription fee.
WordPress Background Image Issues: How To Fix Them?
It’s pretty common to face trouble while adding background images or other customization. Here we have picked 3 popular problems with solutions here. Let’s check them out.
1. Theme Does Not Support WordPress Background Images
If your theme restricts your ability to add a background image or doesn’t enable custom backgrounds, take a look at these options:
- Replace the current theme with one that supports custom backgrounds. When purchasing or downloading themes, check the feature lists for Custom Backgrounds.
- Also, go for plugins that have the functionality to add background images. Most of the time, plugins are built in such a way that they support all themes.
2. Got Dark Or Incorrect Color For WordPress Background Image
Many parameters that operate alongside the backdrop image itself may result in a darker background image. The majority of the time, the issue is a background that is badly colored or has an overlaying filter.
- You must check your theme or plugin that controls the background itself if the background is discolored in the majority of cases.
- Search for a setting that requests a filter or overlay close to the background field. Additionally, you might come across an opacity function that needs to be disabled to properly display your backdrop.
- If all else fails, a backdrop filter might be hardcoded into the theme’s theme files. In that situation, get in touch with the theme’s creator to find out what can be done to change the background color.
3. WordPress Background Image Is Stretched Or Repeats Itself
If the background image is repeated over and over or stretched, that means the image size was too small or inappropriate. Let’s check out the procedure:
- Instead of selecting the Repeat preset option when using a backdrop image that has been uploaded, try presets like Fill Screen, Fit To Screen, or Custom.
Start Creating Stunning Pages Using Background Images
Hopefully, this in-depth guide will help you to add background images seamlessly. So, what are you waiting for? Start adding background images to sections, blocks, or pages and make your website more stunning.
Also, subscribe to our blog to get more of these kinds of Gutenberg tutorials, tips & tricks.
