A CSS snippet for Obsidian.md. (Scroll to bottom for more information!)

figyua.css

/*
* フィギュア F I G Y U A 手辦
* Unlicense | https://gist.github.com/Endermanbugzjfc/f75e8d271057877403725f60700a6a2a
* Please install the Style Settings plugin to configure this snippet.
*
* Credits:
* - A person on Discord: image scalability.
* - ChatGPT: image visibility toggle.
*/
/* @settings
name: Figyua
id: figyua
settings:
  -
    id: hide-figyua
    title: Hide Figyua
    description: "Turning on toggle will set the opacity to 0%. This option can be made into a keybinding or command under the domain of Style Settings plugin. To always hide figyua on a specific file, please add the `cssclasses: hide-figyua` meta property."
    type: class-toggle
    addCommand: true
  -
    id: figyua-set
    title: Figyua Set
    description: Change the set (variant) of figyua. Each set can have different opacity and transformation settings.
    type: class-select
    allowEmpty: false
    options:
      -
        label: Set 1
        value: figyua-set-1
      -
        label: Set 2
        value: figyua-set-2
    default: figyua-set-1
  -
    id: figyua-set-1-heading
    title: Set 1
    type: heading
    level: 1
    collapsed: false
  -
    id: figyua-set-1-heading-image
    title: Image
    type: heading
    level: 2
    collapsed: false
  -
    id: figyua-set-1-url
    title: URL
    description: Upload the image somewhere like Discord and retrieve the URL. Please surround the value with url() WITHOUT a double quote.
    type: variable-text
    default: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif)
  -
    id: figyua-set-1-opacity
    title: Opacity
    description: Opposite meaning of transparency. (in %)
    type: variable-number
    default: 25
  -
    id: figyua-set-1-heading-transformation
    title: Transformation
    type: heading
    level: 2
    collapsed: true
  -
    id: figyua-set-1-bottom-padding
    title: Bottom Padding
    description: Avoid figyua blocking the text in document. May be omitted if your window is large enough that the figyua has its own column to display. (in px)
    type: variable-number
    format: px
    default: 98
  -
    id: figyua-set-2-heading
    title: Set 2
    type: heading
    level: 1
    collapsed: true
  -
    id: figyua-set-2-heading-image
    title: Image
    type: heading
    level: 2
    collapsed: false
  -
    id: figyua-set-2-url
    title: URL
    description: Upload the image somewhere like Discord and retrieve the URL. Please surround the value with url() WITHOUT a double quote.
    type: variable-text
    default: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif)
  -
    id: figyua-set-2-opacity
    title: Opacity
    description: Opposite meaning of transparency. (in %)
    type: variable-number
    default: 100
  -
    id: figyua-set-2-heading-transformation
    title: Transformation
    type: heading
    level: 2
    collapsed: true
  -
    id: figyua-set-2-bottom-padding
    title: Bottom Padding
    description: Avoid figyua blocking the text in document. May be omitted if your window is large enough that the figyua has its own column to display. (in px)
    type: variable-number
    format: px
    default: 98

*/
body { /* https://github.com/mgmeyers/obsidian-style-settings/issues/63 */
  --figyua-set-1-bottom-padding: 98px;
  --figyua-set-1-opacity: 25%;
  --figyua-set-1-url: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif);
  --figyua-set-2-bottom-padding: 98px;
  --figyua-set-2-opacity: 100%;
  --figyua-set-2-url: url(https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif);

  /* Fallback for those who does not have Style Settings: */
  --figyua-bottom-padding: var(--figyua-set-1-bottom-padding);
  --figyua-opacity: var(--figyua-set-1-opacity);
  --figyua-url: var(--figyua-set-1-url);
}

.figyua-set-1 {
  --figyua-bottom-padding: var(--figyua-set-1-bottom-padding);
  --figyua-opacity: var(--figyua-set-1-opacity);
  --figyua-url: var(--figyua-set-1-url);
}
.figyua-set-2 {
  --figyua-bottom-padding: var(--figyua-set-2-bottom-padding);
  --figyua-opacity: var(--figyua-set-2-opacity);
  --figyua-url: var(--figyua-set-2-url);
}
.hide-figyua {
  --figyua-opacity: 0%;
}

/* TODO: resolve breaking change compatibilities: */
/* .cm-editor::after, .markdown-preview-view::after, .canvas-wrapper::after { */
body::after {
  /* https://stackoverflow.com/a/78680766 */
  background-image: var(--figyua-url);

  opacity: var(--figyua-opacity);
  /* TODO: turn into style settings (or ask ChatGPT to do it). */
  width: 100px; /* Set desired width                           */
  height: 80px; /* Set desired height                          */
  right: -10px; /* Distance from the right end                 */
  bottom: 40px; /* Distance from the bottom end                */

  display: block;               /* Ensures its visibility,                  no touchy */
  position: fixed;              /* Ensures it is stuck to an anchor point,  no touchy */
  background-repeat: no-repeat; /* Ensures it only displays once,           no touchy */
  background-size: contain;     /* Scales it to fit the element,            no touchy */
  content: '';                  /* Forces the use of background image,      no touchy */
}

.markdown-source-view {
  padding-bottom: var(--figyua-bottom-padding);
}

Troubleshooting

Partially generated by Claude Sonnet 4.5.

Figyua does not show

• Your device/Obsidian may not have internet access.
  → Check your network connection and ensure Obsidian has permission to access the internet.

• This CSS snippet might be inactive.
  → Go to Settings → Appearance → CSS snippets and ensure the Figyua snippet toggle is enabled. (See Installation Guide.)

• The URLs might point to a file that is not a compatible image.
  → Verify the URLs point to valid image files (PNG, JPG, GIF, SVG, WebP). Test the URL in a browser.

• The URLs might have syntax errors.
  → Check for typos, missing quotes, or incorrect formatting in your image URLs. (See Configuration Guide.)

• The opacity values might be too low to be visible.
  → Increase the opacity value to 1.0.

• The Hide Figyua toggle might be on.
  → Check Settings and ensure the "Hide Figyua" option is disabled.

• The bottom padding values might cause the Figyua to clip off the window.
  → Adjust the bottom padding value or your window size to bring the image into view.

• One or more active plugins may conflict with this CSS snippet.
  → Try disabling other plugins one by one to identify conflicts, or check for known compatibility issues.

• This CSS snippet might be outdated and incompatible with your Obsidian version.
  → Reinstall a newer version of the snippet.