Images or Videos Not Displaying – ZenBlocks buttonBasic

Images or Videos Not Displaying – ZenBlocks buttonBasic

Summary

When images or videos are not displaying, the cause is one of the following: **media not configured, file path mismatch, overlay opacity too high, or size settings issue**. The checkpoints differ depending on the media type (background image / background video / thumbnail).

—

Cause

  • **Media not configured**: No file selected from the media library, or the URL field is empty
  • **File deleted or moved**: The file was deleted from the media library but the block still references it
  • **Overlay is fully opaque**: The overlay Alpha in Background Settings is set to 1.0 (fully opaque), hiding the media underneath
  • **Size/position settings**: Background Size is set to `0`, or Position points outside the button area
  • **Hidden via Display Settings**: Thumbnail or background display is disabled in the Display Settings panel

Solution Steps

  1. Open the Background Settings panel
  2. Verify that the image URL / video URL is correctly set
  3. Confirm the file exists in the media library
  4. Try replacing with a different image to test if it displays
  5. Open the Thumbnail Settings panel
  6. Verify that an image is selected
  7. Confirm the thumbnail show/hide toggle is enabled
  8. Open the overlay section in the Background Settings panel
  9. Check the overlay color's **Alpha (opacity)**
  10. If Alpha is 1.0 (fully opaque), the background image/video will be completely hidden
  11. Adjust to around 0.3-0.6 to allow the image to show through
  12. Check the Background Size setting (`cover` / `contain` / Custom)
  13. Check the Background Position setting (`center center` is the safest)
  14. Verify Custom size is not set to `0px` or `0%`
  15. Open browser developer tools (F12) and go to the Network tab
  16. Check if the image file request returns a 404 error
  17. Clear the CSS Cache and re-check
  18. Thumbnails and background images are independent settings. Thumbnails display as an image frame inside the button, while background images are used as the entire button background. When using both simultaneously, pay attention to the stacking order.
  19. Video backgrounds have autoplay restrictions (especially on mobile). If a video is not displaying, also refer to FAQ: Video Background Not Playing on Mobile.

Related Settings

関連設定

– [背景設定](../background/) – 背景画像・動画・オーバーレイ
– [サムネイル設定](../thumbnail/) – サムネイル画像
– [スタイル設定](../style/) – 背景色

Related FAQ