How to Choose Between Thumbnail and Background – ZenBlocks buttonBasic
Summary
**Thumbnail** displays as an independent image frame inside the button, while **Background** is laid underneath the entire button. Use a thumbnail when you want to “show an image,” and use a background when you want to “set the mood.”
—
Comparison
| Comparison | Thumbnail | Background Image |
|—|—|—|
| Display position | Independent image frame inside button | Entire button background |
| Relationship with text | Side-by-side or stacked with text | Laid underneath text |
| Size control | Specified individually with Width / Height | Background Size (cover / contain, etc.) |
| Hover support | Size/position hover changes available | Addressed via overlay changes |
| Video support | None (static images only) | Video background supported |
| Overlay | None | Overlay supported |
| Border Radius | Thumbnail’s own Border Radius setting | Follows the button’s Border Radius |
| Responsive | Size/position configurable per device | Configurable per device |—
How to Decide
### When to Use Thumbnail
1. **You want to showcase a product image or logo**: When the image itself carries important information
2. **You want text and image side by side**: Flexible positioning available through Layout Settings
3. **You want Border Radius or borders on the image**: Thumbnail has its own decoration settings
4. **You want the image to enlarge on hover**: Size change hover settings are available**Examples:**
– Add a product image alongside a “View Product A details” button
– Place an avatar image on an “Author Profile” button
– Display a catalog cover on a “Download Catalog” button### When to Use Background Image
1. **You want to set the overall mood**: Add decorative texture or patterns
2. **You want to place text over a photo**: Overlay ensures readability
3. **You want to use video**: Only background supports video
4. **You want to switch backgrounds on hover**: Different backgrounds can be set for Default / Hover**Examples:**
– Use a seasonal image as background on a sale-banner-style button
– Use brand texture as the button background
– Create an eye-catching CTA button with a short looping video### When to Use Both Together
You can place a thumbnail over a background image. In this case:
– Background: Sets the mood (patterns, gradients, subtle images + overlay)
– Thumbnail: Displays a specific image as a product or icon
– Text: CTA text positioned side-by-side with the thumbnail—
– Thumbnail images use `object-fit` for display control. If the aspect ratio doesn’t match, the image may be cropped.
– When combining a background image with an overlay, setting the overlay Alpha incorrectly can make the image invisible.
– Using large images for both the thumbnail and background can impact page speed.—
Related Settings
関連設定
– [サムネイル設定](../thumbnail/) – サムネイル画像の配置・サイズ・装飾
– [背景設定](../background/) – 背景画像・動画・オーバーレイ
– [レイアウト設定](../layout/) – テキストとサムネイルの配置