Jump to content

How can I have the same image at the top of all my blog posts?

Go to solution Solved by tuanphan,

Recommended Posts

Hello Squarespace friends,

 

I would like the same image to go at the top of all of my blog posts. I can't see a way to do this in 7.1.

Can someone offer some custom code for me to do this?

Last week, I moved my site from the Five template in 7.0, changed to Bedford, and then migrated to 7.1. 

In the Five template, I could put a banner image at the top of every page. (Screen grab below from old website.) 

 

Now, in 7.1, that banner image is gone and all I have is a gradient in the site header. Kind of boring!  Screen grab below.

Here's a link to one of 500+ blog posts on my current site - https://www.alpinesavvy.com/blog/where-to-put-the-pulley

 

Can someone suggest some custom CSS code so I can have the same image at the top of every blog post, like I did on my old site?

 

Thanks!

John

Alpinesavvy.com

collage of old style blog page copy.jpg

Link to comment
  • Replies 3
  • Views 291
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

There are some ways to achieve this

(1) Add a section in Footer, add your image, then we can give code to move it to top of all blog posts

(2) Use plugin to do samething

(3) Use this code to Website > Website Tools > Custom CSS to add image to all blog posts

[class*="type-blog"].view-item #page>article:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/5b5251575b409b5fa4744be6/ab58352c-6d22-4f27-ad43-cc20644c88dd/AAA+BANNER.jpg?format=2500w);
    background-size: cover;
    display: block;
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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.