Obsidian · Journal · snippets/fading-footer-image.css

/* Fading Footer Image for Specific Note */
/* Add 'fading-footer-image: true' to your note's frontmatter */

.markdown-reading-view.fading-footer-image,
.markdown-editing-view.fading-footer-image {
    position: relative;
    overflow: hidden; /* Important for containing the image */
}

.markdown-reading-view.fading-footer-image::after,
.markdown-editing-view.fading-footer-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    background-image: url('{{HOME}}/Documents/Semester 4/Semester 4/footer.jpg'); /* REPLACE WITH YOUR IMAGE URL OR VAULT PATH */
    background-size: cover; /* Covers the area */
    background-position: center bottom; /* Adjust position */
    background-repeat: no-repeat;
    opacity: 0.2; /* Adjust overall opacity of the image */
    pointer-events: none; /* Allows clicking text behind it */
    z-index: 0; /* Ensures it's behind content */

    /* Add the fade effect at the top of the image */
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,   /* Start fully transparent */
        rgba(0,0,0,0.2) 20%, /* Gradually become visible */
        rgba(0,0,0,1) 50%    /* Fully visible from 50% down */
    );
    -webkit-mask-image: linear-gradient( /* For broader browser support */
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.2) 20%,
        rgba(0,0,0,1) 50%
    );
}

/* Ensure content stays above the image */
.markdown-reading-view.fading-footer-image .markdown-preview-sizer,
.markdown-editing-view.fading-footer-image .cm-editor {
    position: relative;
    z-index: 1;
}