In this post, I will show you how to add a background image or video in 4 steps using the Site Editor.
When you use a block theme, – like the new default theme Twenty Twenty-Two, WordPress hides the Customizer menu item. Instead of the Customizer, you can use the new Site Editor to update your website’s background image.
Adding a background image using the Customizer was a single step process. In the Site Editor you have more options to choose from, for example duotone and opacity.
Adding page backgrounds using the Site Editor
The way you add background- images or videos in the Site Editor is by using a cover block.
You can add backgrounds to a section of a page, or to the whole page. In this example video, I am adding a full page background.
Step 1: Go to Appearance > Editor to open the Site Editor. Select the template you want to add the background image to.
Step 2: At the top of the template, add a new cover block. Select or upload your media: An image or video.
Select your media with care. Larger images or videos can slow down your website.
I recommend Squoosh for reducing image sizes.
Step 3: Next, move all your content inside the cover block. I recommend using the List View to select and drag the blocks into position.
Delete the paragraph placeholder block inside the cover block that says “Write title…”.
Step 4: Try out the different options of the cover block before you publish your changes.
You can adjust the overlay color, opacity, and media position. Depending on the size of the media, you need to select the option “Toggle full height” in the block toolbar. When you activate this option, the media will cover the full height of your pages:
If you want to add the same background to all templates, you have to repeat the process for each template.
Conclusion
In the Customizer, -if your theme supported it, you could upload a background image, change it to fit the screen, and change it’s position. The downside was that you could not add different background images to different pages. To do this, you had to install a custom plugin. And if you wanted to add a video background, you could only add one to the header, not to the whole page.
With full site editing, adding a body background image requires more steps. It can also be tricky to move your content inside the cover block. The options for the cover block makes up for this and makes it easier to add the perfect background. There are options for the cover block that I personally would not want to be without: For example the duotone, the overlay and opacity, and the content positioning.
The post How to add a background image or background video with full site editing appeared first on Full Site Editing.