Image Patterns

# Marp Image Syntax Reference Image placement and styling methods based on official Marpit image syntax. Official documentation: https://marpit.marp.app/image-syntax ## Basic Image Insertion ### Regular Images ```markdown   ``` Images are displayed as content. ### Size Specification Marp allows adding size keywords to images: ```markdown    ``` **Supported units**: - `px` - Pixels - `%` - Percent - `em`, `rem`, `cm`, `mm`, `in`, `pt`, `pc` **Abbreviations**: - `w:` = `width:` - `h:` = `height:` ## Background Images (`bg` keyword) ### Basic Background Image ```markdown  ``` Places the image as a slide background. It doesn't overlap with text content and is positioned in the background. ### Background Size Keywords ```markdown     ``` | Keyword | Behavior | CSS Equivalent | |---------|----------|----------------| | `fit` | Preserve aspect ratio, fit within slide | `background-size: contain` | | `cover` | Preserve aspect ratio, cover entire slide | `background-size: cover` | | `contain` | Same as `fit` | `background-size: contain` | | `auto` | Original size | `background-size: auto` | ### Background Size (Numeric Values) ```markdown    ``` Supports the same syntax as CSS `background-size` property. ## Split Backgrounds You can split the screen using multiple background images. ### Basic Split ```markdown   ``` Two images are displayed split left and right. ### Three or More Splits ```markdown    ``` Three or more images are divided equally. ### Specifying Split Direction Default is horizontal split, but vertical split is also possible: ```markdown   ``` Use `vertical` keyword to change to vertical split. ### Left/Right Alignment ```markdown  ``` Places image on the left, reserving text space on the right. ```markdown  ``` Places image on the right, reserving text space on the left. ### Size Ratio Specification ```markdown  ``` 33% image on left, 67% text space on right. ```markdown  ``` 60% image on right, 40% text space on left. ## Filter Effects ### Brightness Adjustment ```markdown   ``` Value range: 0 (completely black) ~ 1 (normal) ~ 2+ (brighter) ### Contrast ```markdown   ``` ### Blur ```markdown  ``` ### Grayscale ```markdown   ``` Value range: 0 (color) ~ 1 (full grayscale) ### Sepia ```markdown   ``` ### Hue Rotation ```markdown  ``` ### Invert ```markdown   ``` ### Opacity ```markdown  ``` ### Saturation ```markdown  ``` ### Multiple Filters ```markdown  ``` ## Practical Pattern Examples ### Pattern 1: Text on Left, Image on Right ```markdown ## Product Introduction  - Feature 1 - Feature 2 - Feature 3 ``` ### Pattern 2: Background Image + Overlay Text ```markdown  # Catchphrase Subtext ``` White text placed on darkened background. ### Pattern 3: Multiple Image Comparison ```markdown   ``` Place Before/After side by side. ### Pattern 4: Vertical Comparison ```markdown   ``` Place images top and bottom. ### Pattern 5: Sized Regular Image ```markdown ## Diagram  The above diagram shows... ``` ### Pattern 6: 3-Split Layout ```markdown    ``` ### Pattern 7: Background with Filter Effects ```markdown  # Easy-to-Read Text Subdued background with blur and darkness ``` ## Important Notes 1. **Background Images and Text**: `![bg]` images are placed on the background layer and do not overlap with text 2. **Multiple Background Order**: They are placed from left to right (or top to bottom) in the order written 3. **Filter Support**: Not all filters work in all environments 4. **Relative Paths**: Image paths are specified relative to the Markdown file ## Official Reference For details, refer to official documentation: - **Image syntax**: https://marpit.marp.app/image-syntax