> [!kanban]+ [[Obsidian TTRPG Tutorials]] / [[Theme and Appearance]] / [[CSS - Image Background Fade]] > - [[Getting Started]] > - ![[Pasted image 20230527003751.jpg|hsmall+wsmall+center]] > - [[Plugin Tutorials]] > - ![[Pasted image 20230527184201.jpg|hsmall+wsmall+center]] > - [[Community Supported Games]] > - ![[Pasted image 20230527001506.jpg|hsmall+wsmall+center]] > - [[Obsidian TTRPG Tutorials/Templates/Templates\|Templates]] > - ![[Pasted image 20230530220438.jpg|hsmall+wsmall+center]] > - [[Community and Support]] > - ![[Pasted image 20230527005303.jpg|hsmall+wsmall+center]] This \*.css snippet can be used to add a faded background image at the top of your note or even to have a faded background image in a [[Call Out Boxes|Call Out Box]]. Obsidian > Settings > Appearance > CSS Snippets > Open Snippets Folder ![[CSS - Multi Column Properties-20231010224816278.webp]] In this folder, create a new text file. Name it: `Fade_Header.css` Copy the code below into the file and save. Obsidian > Settings > Appearance > CSS Snippets > Locate: Fade_Header > Enable ```` .view-content { z-index: 0; } img[alt^="banner-fade"] { width: 100%; margin: 0px auto; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); opacity: 0.4; z-index: -1; } ```` ### Usage To use this, simply add an image to your note and add `|banner-fade` to the image line. **Example:** `![[imagename.png|banner-fade]]` If you would like to add it to a call out then you can do this. ```` > [!tip]+ Flavor > `![[imagename.png|banner-fade]]` > Text ```` **Example:** ![[CSS - Image Background Fade-20231011121621512.webp]]