How to change background images in Evolve HubSpot CMS Blog Listing Layouts

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


.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;

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.