Jump to content

How to add Background Image that lays under the header for a blog post?

Recommended Posts

Site URL: https://www.kaci.io/growth-stories/ojtpx8stfab3p7xlc1bkft907usraq

Hi! Across my whole website I have background images that bleed up under the transparent header. My logo on top is white. 
I'd like to be able to do the same for an individual blog post. Is there any way to do this?

I obviously can't just leave the page white because then my logo doesn't show up. But I don't like the other full colour options. 

Help?

Screenshot (2).png

Link to comment

Add this code to Blog Page Settings > Advanced > Header

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://assets.codepen.io/3198845/WMBlogPostBannerFREEv2-3.js"></script>
<div 
     data-wm-plugin="blog-post">
</div>

Code by @WillMyers

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 2 years later...
On 1/19/2023 at 6:22 AM, taylahroberts1 said:

Hi @tuanphan, I used this code and it worked perfectly - is there anyway I can edit the font position (centred and middle) / font family of the text overlay?

I would like it to match the rest of the pages without changing the title font family on the blog overview page.

https://anabezi.squarespace.com/

password: ana123

Add this to Blog Page Header

<style>
  section.has-background.wm-blog-banner.blog-item-wrapper {
    display: flex;
    align-items: center;
}
  .blog-item-top-wrapper * {
    font-family: monospace !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.