Background image in header for blog posts?

Site URL: https://prism-lobster-kwcp.squarespace.com/

Hi,

How can I get an image in the background of my header in individual blog posts? I want to match the design of the rest of the site pages. (example: https://prism-lobster-kwcp.squarespace.com/webinars/blog-post-title-three-w6t2p)

Also need the same for my site.  I need to be able to display the site brand consistently across pages, especially the blog pages.  The more i work with squarespace the less and less impressed i am by you it.

This would seem like a fairly straightforward requirement in any site, yet an unusual lack of foresight.

Hi,

  you can add this code to Design > Custom CSS. However the title won't over image

body.collection-type-blog-side-by-side.view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/v1/609bf83cffa8e36b5272df1d/72ca889f-75e1-4f04-99c5-933aa7990ec3/homeillustration.jpg?format=1500w);
    padding-bottom: 20px;
}

You can adjust 20px

You can consider use this blog post banner plugin, looks better. It will be like this (we can make header transparent + over image with some simple code later).

(The link contains an affiliate link, which means I will get a small comission if you click on the link and buy the plugin. Of course, it's definitely a good plugin, from a dev I know, so I recommend it.)

Let me know if you have any other problems.

This is very helpful, thanks. I don't understand why I can't change the "theme" colors for just the blog headers. Your image code works great, but the navigation colors are all screwed up now.

On 10/8/2021 at 10:26 PM, JHebert said:

This is very helpful, thanks. I don't understand why I can't change the "theme" colors for just the blog headers. Your image code works great, but the navigation colors are all screwed up now.

You want to change navigation items color on blog posts? or ?

I figured this out by using a ton of CSS, thanks!

@tuanphan I'm looking to add a single header image to all blog post pages - similar to the screenshot above with orange image. Could I get some CSS code to achieve that for blog pages.

URL: uplifting.me

10 hours ago, jmerrill said:

@tuanphan I'm looking to add a single header image to all blog post pages - similar to the screenshot above with orange image. Could I get some CSS code to achieve that for blog pages.

URL: uplifting.me

Can you share built-in domain? It looks like you havent' finished connecting domain with SS site yet

@tuanphan sorry about that. I had to fix a domain issue. You can now see the live site here: https://upliftingme.co

On 12/10/2023 at 7:02 AM, jmerrill said:

@tuanphan I'm looking to add a single header image to all blog post pages - similar to the screenshot above with orange image. Could I get some CSS code to achieve that for blog pages.

URL: uplifting.me

Use this CSS code, it will apply to all blog post detail (with list page, will need to change view-item to view-list

[class*="type-blog"].view-item header#header {
    background-image: url(https://cdn.pixabay.com/photo/2023/11/11/19/58/whisky-8381774_1280.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@tuanphan Thank you!