CSS for Adding Background Image to Blog/Store Sections?

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

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.

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?

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.

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?

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.

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.

@rchamberlainHi. On tablet, i see this issue

 (Tablet – Homepage) Content overflows the block.

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