# (Squarespace) How to add a fullwidth black background with blog title, metadata to top of blog post

**URL:** <https://community.elfsight.com/t/squarespace-how-to-add-a-fullwidth-black-background-with-blog-title-metadata-to-top-of-blog-post/130179>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 9, 2025, 3:08am UTC](https://community.elfsight.com/t/squarespace-how-to-add-a-fullwidth-black-background-with-blog-title-metadata-to-top-of-blog-post/130179 "2025-07-09T03:08:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 9, 2025, 3:08am UTC](https://community.elfsight.com/t/squarespace-how-to-add-a-fullwidth-black-background-with-blog-title-metadata-to-top-of-blog-post/130179/1 "2025-07-09T03:08:29Z")

</div>

To add a fullwidth black background with blog title, metadata to top of blog post, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/1/e13f418153305ae63256808b0a83b6534c88dce0.png)

You can also use **[Blog Post Banner Plugin](https://www.will-myers.com/products/p/blog-post-banner-image-styles-plugin?peachs_apc=tuan-phan)** so you can achieve this easier without using complex code.

**#1.** First, use this code to Code Injection \> Footer (or Blog Page Header Injection)

```auto
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.blog-item-wrapper')) {
        var topWrapper = document.querySelector('.blog-item-top-wrapper');
        
        if (topWrapper) {
            var bannerHTML = '<section class="page-section page-banner-custom">' + topWrapper.outerHTML + '</section>';
            
            var targetElement = document.querySelector('.blog-item-wrapper');
            
            if (targetElement) {
                targetElement.insertAdjacentHTML('beforebegin', bannerHTML);
                topWrapper.remove();
            }
        }
    }
});
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/e/ae93815a3fca944ca1a2da9f32fa6c650afad1cd.jpeg)

**#2.** Use this code to Custom CSS

```auto
/* 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 {
    background-color: #000;
    padding-bottom: 30px;
}
section.page-section.page-banner-custom * {
    color: #fff;
    text-align: center !important;
    justify-content: center;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/0/30d0463b08ca4ead9c66aaef6f23fd9826218824.jpeg)