(Squarespace) How to add a banner image with transparent black overlay banner on top of blog post

[tuanphan]

To add a banner image with transparent black overlay banner on top of blog post, like this.

You can also use Blog Post Banner Plugin so you can achieve this easier without using complex code.

#1. First, use this code to Code Injection > Footer

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.blog-item-wrapper')) {
        var topWrapper = document.querySelector('.blog-item-top-wrapper');
        
        if (topWrapper) {
            var featuredImage = '';
            var ogImage = document.querySelector('meta[property="og:image"]');
            
            if (ogImage && ogImage.content) {
                featuredImage = '<div class="banner-image"><img src="' + ogImage.content + '" alt=""></div>';
            }
            
            var bannerHTML = '<section class="page-section page-banner-custom">' + 
                            featuredImage + 
                            topWrapper.outerHTML + 
                            '</section>';
            
            var targetElement = document.querySelector('.blog-item-wrapper');
            
            if (targetElement) {
                targetElement.insertAdjacentHTML('beforebegin', bannerHTML);
                topWrapper.remove();
            }
        }
    }
});
</script>

#2. Next, use this code to Custom CSS.

/* blog fullwidth black banner */
.blog-item-meta-wrapper {
    display: flex;
    align-items: center;
    font-size: 18px;
    flex-wrap: wrap;
    gap: 11px;
}
.blog-item-author-date-wrapper {
    display: flex;
}
.blog-meta-item--date::after, .blog-item-category-wrapper:not(:last-child)::after {
    content: "•";
    padding: 0 0.5em;
}
section.page-section.page-banner-custom {
  padding-top: 0px !important;
}
section.page-section.page-banner-custom * {
    color: #fff;
    text-align: center !important;
    justify-content: center;
}
section.page-section.page-banner-custom img {
    display: block;
    width: 100%;
}
.blog-item-top-wrapper {
    position: absolute;
}
.banner-image:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}