It requires a bit of code. But it's very easy.
Step 1: Upload your file to HubSpot's File Manager. For best results keep your image a maximum of 1920px wide.
Step 2: Copy the URL and place it in a notepad or off to the side. You'll need this later.
Step 3: Go to your blog settings. Gear > Website (bottom right) > Blog > Choose Blog > Templates Tab > Scroll Down to Header HTML > Blog Listing Pages Header HTML
Step 4: Paste in the following CSS Code
<style>
.blog-header.hero-section-wrap {
position: relative;
background-image: url(IMAGE URL HERE); }
.blog-header__inner.hero-section-overlay.blog_list {
background-color: rgba(0,0,0,0.5)!important;
}
</style>
You can modify the overlay with the second property and change the color by updating the colors here.
Step 5: Paste in the image URL from step 2
Step 6: Press Save
Step 7: Check the blog listing view
Repeat / modify for each additional blog that you want to modify.