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);
}

Click to show image alt text generated by Claude Sonnet 4.5, partially edited.

Installation and Configuration Guide for Figyua CSS Snippet

This instructional diagram shows a two-part guide for installing and configuring the Figyua CSS snippet in Obsidian:

Installation Guide (top section):
Step 1: Navigate to the "Appearance" section in settings
Step 2: Scan the QR code and copy the associated file
Step 3: Enable the Figyua snippet by finding it within all installed CSS snippets and toggling it on

Configuration Guide (bottom section):
Step 1: Install Style Settings in the Community Plugins page (if not already done)
Step 2: Navigate to the Style Settings page in the settings menu
Step 3: In the "Set 1" section, configure URLs by surrounding values with "url()" WITHOUT using double quotes - this instruction is emphasized in red text

The guide includes screenshots of the Obsidian settings interface showing the relevant menus, toggles, and configuration fields.

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.