Jump to content

CSS for Adding Background Image to Blog/Store Sections?

Recommended Posts

Site URL: https://apricot-coconut-f6eb.squarespace.com/

Hi there, I couldn't find answers on this workaround, but I was wanting to match the background texture image from sections on other pages. The Blog post and Store Category sections do not seem to have the option to change the background, I was wondering what the Custom CSS workaround would be?

Other forums posts have mentioned sitewide backgrounds, but that isn't what I'm looking for

Site Link: https://apricot-coconut-f6eb.squarespace.com/

Password: magickal 

Pic related is the banner, you'll see the Blog/Store sections are only able to be the solid color

WallpaperBanner-01.png

Link to comment

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page and Blog Settings > Advanced > Page Header Code Injection for the blog page..

<style>

  #page .section-background {
  
    background-image : url( [enter image url here between parenthesis] );
    background-size : contain;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page and Blog Settings > Advanced > Page Header Code Injection for the blog page..

<style>

  #page .section-background {
  
    background-image : url( [enter image url here between parenthesis] );
    background-size : contain;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Worked great! Thank you.

On the blog posts, there is a bit of a gap at the bottom where the image ends. I've tried adding a vertical-only repeat style in the Page Header Code Injection and Blog Post Item Code Injection, but nothing seems to be changing. Any idea what to do?
image.thumb.png.6f8720d47711f5c3149e639079ca5c28.png

Link to comment

The gap is where pagination would go when it is visible. It's actually a little more involved to get the effect to work on the blog item page.

Remove previous attempts to get the image to repeat on blog items.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.

<style>

  /*
  
    begin add blog item page background image
    
    Version         : 0.1d0
    
    SS Version      : 7.1
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .view-item #page {
    
      background-image : url( [enter image url here between parenthesis] );
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .view-item #page {
    
      background-repeat : repeat;
      
      }
      
    .view-item #page .bright:not( .has-background ) .section-background,
    .view-item #page .page-section,
    .view-item #page .bright .item-pagination[ data-collection-type ^= "blog" ],
    .view-item #page .bright.item-pagination[ data-collection-type ^= "blog" ]
    
      {
      
        background-color : transparent;
        
        }
        
    /* end add blog item page background image */
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 7/10/2021 at 5:08 PM, creedon said:

The gap is where pagination would go when it is visible. It's actually a little more involved to get the effect to work on the blog item page.

Remove previous attempts to get the image to repeat on blog items.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page.

<style>

  /*
  
    begin add blog item page background image
    
    Version         : 0.1d0
    
    SS Version      : 7.1
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .view-item #page {
    
      background-image : url( [enter image url here between parenthesis] );
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .view-item #page {
    
      background-repeat : repeat;
      
      }
      
    .view-item #page .bright:not( .has-background ) .section-background,
    .view-item #page .page-section,
    .view-item #page .bright .item-pagination[ data-collection-type ^= "blog" ],
    .view-item #page .bright.item-pagination[ data-collection-type ^= "blog" ]
    
      {
      
        background-color : transparent;
        
        }
        
    /* end add blog item page background image */
    
  </style>

Let us know how it goes.

Thank you very much! 
Implementing the code, it seems to have make the background pattern work properly on the individual blog item page, but the parent page with the blog mosaic has now lost the pattern, reverting to solid color.

Out of curiosity I tried using both of your previous sections of code together, and while the pattern is visible on both pages, on the sample blog item, it appears misaligned due to having two differently sized images of the pattern on top of one another. No code has been added to the Post Blog Item Code Injection of course.

Is there a way to have the style of the individual Blog Item affect the parent page via pagination? Or the other way around, make the Blog mosaic parent page have pagination that affects its individual item pages?

Link to comment

The most recent code I posted only applies to the blog item pages per your request. It could have no effect on the blog listing pages. As there was a pattern before on the blog listing pages and it it gone now then some code has been removed.

You can try this as a start for the blog listing page.

<style>

  #page .section-background {
  
    background-image : url( /s/WallpaperBanner-01.png );
    background-size : contain;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
15 hours ago, creedon said:

The most recent code I posted only applies to the blog item pages per your request. It could have no effect on the blog listing pages. As there was a pattern before on the blog listing pages and it it gone now then some code has been removed.

You can try this as a start for the blog listing page.

<style>

  #page .section-background {
  
    background-image : url( /s/WallpaperBanner-01.png );
    background-size : contain;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Wonderful, wonderful! Works like a charm.

Thanks a bunch for your help, I really appreciate it.

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.