{"id":89,"date":"2025-02-23T00:40:18","date_gmt":"2025-02-23T00:40:18","guid":{"rendered":"https:\/\/notes.zj1963.com\/?p=89"},"modified":"2025-02-23T00:40:18","modified_gmt":"2025-02-23T00:40:18","slug":"%e5%8f%af%e4%bb%a5%e5%8a%a0%e8%83%8c%e6%99%af%e5%9b%be%e5%83%8f%e7%9a%84%e5%9d%97","status":"publish","type":"post","link":"https:\/\/notes.zj1963.com\/?p=89","title":{"rendered":"\u53ef\u4ee5\u52a0\u80cc\u666f\u56fe\u50cf\u7684\u5757"},"content":{"rendered":"\n

Blocks That Support Background Images in WordPress Gutenberg<\/strong><\/p>\n\n\n\n

In the WordPress Block Editor (Gutenberg)<\/strong>, some blocks allow you to set a background image<\/strong> directly. Here are the best options:<\/p>\n\n\n\n

1\ufe0f\u20e3 Cover Block (Best for Full-Width Backgrounds)<\/strong><\/h2>\n\n\n\n

\u2705 Supports:<\/strong> Background images & videos<\/p>\n\n\n\n

\u2705 Best for:<\/strong> Hero sections, headers, call-to-action areas<\/p>\n\n\n\n

\ud83d\udd39 How to Use:<\/strong><\/p>\n\n\n\n

1. Add a \u201cCover\u201d block<\/strong> (+ \u2192 Search for \u201cCover\u201d).<\/p>\n\n\n\n

2. Click \u201cUpload\u201d<\/strong> or choose an image from the Media Library<\/strong>.<\/p>\n\n\n\n

3. Adjust the opacity, overlay, and text color<\/strong> for better readability.<\/p>\n\n\n\n

4. Add any content inside it (text, buttons, etc.).<\/p>\n\n\n\n

5. Resize<\/strong> to fit your layout.<\/p>\n\n\n\n

\ud83d\udccc Tip:<\/strong> You can also use a video background<\/strong> with the Cover block! \ud83c\udfa5<\/p>\n\n\n\n

<\/p>\n\n\n\n

2\ufe0f\u20e3 Group Block (For Multiple Blocks with Background)<\/strong><\/h2>\n\n\n\n

\u2705 Supports:<\/strong> Background images & solid colors<\/p>\n\n\n\n

\u2705 Best for:<\/strong> Wrapping multiple blocks inside one background<\/p>\n\n\n\n

\ud83d\udd39 How to Use:<\/strong><\/p>\n\n\n\n

1. Add a \u201cGroup\u201d block<\/strong> (+ \u2192 Search for \u201cGroup\u201d).<\/p>\n\n\n\n

2. Click on the block and go to Block Settings \u2192 Styles<\/strong>.<\/p>\n\n\n\n

3. Select Background \u2192 Image<\/strong> and upload\/select an image.<\/p>\n\n\n\n

4. Add blocks inside it (paragraphs, buttons, headings, etc.).<\/p>\n\n\n\n

\ud83d\udccc Tip:<\/strong> Works well for sections with multiple blocks<\/strong> sharing a background.<\/p>\n\n\n\n

<\/p>\n\n\n\n

3\ufe0f\u20e3 Columns Block (Background for Multiple Columns)<\/strong><\/h2>\n\n\n\n

\u2705 Supports:<\/strong> Background images via the Group Block<\/strong><\/p>\n\n\n\n

\u2705 Best for:<\/strong> Side-by-side layouts with different content sections<\/p>\n\n\n\n

\ud83d\udd39 How to Use:<\/strong><\/p>\n\n\n\n

1. Add a Columns<\/strong> block.<\/p>\n\n\n\n

2. Wrap it inside a Group block<\/strong>.<\/p>\n\n\n\n

3. Set a background image<\/strong> on the Group block.<\/p>\n\n\n\n

4. Add content inside each column.<\/p>\n\n\n\n

\ud83d\udccc Tip:<\/strong> Great for grid layouts<\/strong> with a background.<\/p>\n\n\n\n

<\/p>\n\n\n\n

4\ufe0f\u20e3 Media & Text Block (Image on One Side, Text on Another)<\/strong><\/h2>\n\n\n\n

\u2705 Supports:<\/strong> Background images on the media side<\/p>\n\n\n\n

\u2705 Best for:<\/strong> Content sections with text + image side-by-side<\/strong><\/p>\n\n\n\n

\ud83d\udd39 How to Use:<\/strong><\/p>\n\n\n\n

1. Add a Media & Text<\/strong> block.<\/p>\n\n\n\n

2. Upload an image on the left (or right).<\/p>\n\n\n\n

3. Add text on the other side.<\/p>\n\n\n\n

\ud83d\udccc Tip:<\/strong> Ideal for feature sections<\/strong> or service descriptions.<\/p>\n\n\n\n

<\/p>\n\n\n\n

5\ufe0f\u20e3 Buttons Block (Add Background via Group Block)<\/strong><\/h2>\n\n\n\n

\u2705 Supports:<\/strong> Background images if wrapped inside a Group Block<\/strong><\/p>\n\n\n\n

\u2705 Best for:<\/strong> Call-to-action (CTA) sections<\/p>\n\n\n\n

\ud83d\udd39 How to Use:<\/strong><\/p>\n\n\n\n

1. Add a Group block<\/strong> \u2192 Set background image<\/strong>.<\/p>\n\n\n\n

2. Inside, add a Buttons block<\/strong> with a CTA (e.g., \u201cLearn More\u201d).<\/p>\n\n\n\n

\ud83d\udccc Tip:<\/strong> Great for stylish call-to-action sections<\/strong>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\ud83c\udfaf Best Option for You?<\/strong><\/p>\n\n\n\n

\u2022 \u2705 Full-page background?<\/strong> \u2192 Cover Block<\/strong><\/p>\n\n\n\n

\u2022 \u2705 Section with multiple blocks?<\/strong> \u2192 Group Block<\/strong><\/p>\n\n\n\n

\u2022 \u2705 Grid layout with background?<\/strong> \u2192 Columns Block<\/strong><\/p>\n\n\n\n

\u2022 \u2705 Side-by-side layout?<\/strong> \u2192 Media & Text Block<\/strong><\/p>\n\n\n\n

\u2022 \u2705 CTA with a background?<\/strong> \u2192 Group + Buttons Block<\/strong><\/p>\n\n\n\n

Need help with styling or responsiveness? \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"

Blocks That Support Background Images in WordPress Gutenberg In the WordPress Block Editor (Gutenberg), some blocks allow you to set a background image directly. Here are the best options: 1\ufe0f\u20e3 Cover Block (Best for Full-Width Backgrounds) \u2705 Supports: Background images & videos \u2705 Best for: Hero sections, headers, call-to-action areas \ud83d\udd39 How to Use: 1. Add a \u201cCover\u201d block (+ \u2192 Search for \u201cCover\u201d). 2. Click \u201cUpload\u201d or […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":1,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":90,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions\/90"}],"wp:attachment":[{"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.zj1963.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}