HOW TO ADD BACKGROUND IMAGE FOR SITE HEADER

Hi everyone, I'm trying to add a background for :

1. Site header 

2. Blog - Can individual blogs come with different image background? 

The way I managed to have a background site header is to add section, set header as transparent, and the background follows the 1st section's image background. However, under blog section, individual articles, I'm unable to add a section at all for me to have a consistent background across all pages.

Does anyone know of a solution? Any help is much appreciated!! 

in 7.1, background images come from the 1st section as you rightly point out. Individual blog posts do not allow you to put sections in, but they do leave in a place where a section background could go. So, you can access this by injecting some css in the Post Blog Item Code. This does require a business/premium plan.

Go to the blogs settings and Advanced and then put this code in the blog item. (you'll need to include a URL to your background picture and to play around with the height - but this should get you started).

<style>
article div.section-background::before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  width:100%;
  height:350px;
  background-size:cover;
  background-image:url('https://url-to-your-image-goes-here');
}
</style>

• if you don't have premium we would need to find the specific section ids for your site to make the rule specific enough for it to live in your Custom CSS section. you'd need to publish your site and provide us with a link (and a password if you don't want it fully public yet) or use Squarespace ID finder chrome extension to get the sectionid and put that in the css rule
• you'll have to be careful here with dark images, if Squarespace thinks that its headers are going on a light background so it will probably have all its header nav and blog headings black. you might need to add more rules to format the blog title correctly
• the background image size is set to cover, so it will size and center the image such that it covers the whole space. this wont' take into account a "focus-point" like squarespace put in, as they position that with script.

This should be enough to get you started though.