How to set an Image as the background for a group of blocks in Gutenberg

Last updated December 5th, 2023 23:43

The new version of WordPress 6.4 has brought many minor adjustments and changes. Among the changes that I find interesting is the ability to set a custom background for a group of blocks. This is a feature that is natively found in almost every external page builder. However, for those who don’t have much experience with the Gutenberg editor, finding this option can be somewhat challenging. Personally, I’ve never grown very fond of Gutenberg. In this article, let’s take a look at how you can set an image as the background for a group of blocks in Gutenberg. Developers have somewhat hidden this feature, and a beginner’s eye won’t easily stumble upon this setting.

How to set an Image as the background for a group of blocks in Gutenberg

I will first outline the whole process in bullet points, and for simplicity, I will also show the entire procedure visually in the form of a gallery. After all, it’s easy not to get lost in images.

  • Start by clicking on the block group settings.
  • From the list, select “cover“.
  • Click on “Add Media“.
  • Now you can choose whether you want to use an image from the media library (previously uploaded), or if you want to upload a new image. Lastly, you can use the article’s featured image.
  • In the right menu, finalize the image’s position and display settings.
  • If you want to adjust transparency, click on the divided circle icon in the right menu and adjust the transparency percentage.

The entire process step by step as a visual guide

How to set an Image as the background for a group of blocks in Gutenberg

Conclusion

As you can see, the entire process is not significantly complex, and you only need to try it once or twice. After that, you will easily remember this setting. It’s a feature that the native editor was missing for a long time, and many WordPress users have been calling for it. Finally, you don’t have to use external plugins or other page builders as Elementor that had this feature seamlessly integrated.

The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

newsletter

Subscribe to the Newsletter

Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.

Odebírat
Upozornit na
guest
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje