Adding an image as the background on both the store page and the individual product pages (hawley)

yasminva · March 8, 2021

hi

i'm having an issue with the background on my store page, i can't add an image as the background on the /store page and the individual product pages

id like it to match the rest of my site and not look so empty, is there i ccs code i need to input to allow me to add a background?

thank you

creedon · March 8, 2021

Please post your site-wide.

Posting your site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

yasminva · March 9, 2021

14 hours ago, creedon said:

Please post your site-wide.

Posting your site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

ahh sorry i completly forgot! the password is zeronine

creedon · March 9, 2021

You'll need to upload or already have a background image somewhere for this to work and have the URL of the image.

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

<style>

  /* add background image to store pages */
  
  .sections .page-section:first-child .section-background {
  
    background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' );
    
    }
    
  </style>

This is for v7.1.

You will need to replace the URL in the code with the URL of the image you want to use.

Let us know how it goes.

Edited March 9, 2021 by creedon

yasminva · March 9, 2021

55 minutes ago, creedon said:
You'll need to upload or already have a background image somewhere for this to work and have the URL of the image.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.
<style>

  /* add background image to store pages */
  
  .sections .page-section:first-child .section-background {
  
    background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' );
    
    }
    
  </style>
This is for v7.1.

You will need to replace the URL in the code with the URL of the image you want to use.

Let us know how it goes.

thank you that worked, and i managed to find the url for the image i wanted

is there any way i can do this to the cart too?

Edited March 9, 2021 by yasminva

creedon · March 10, 2021

Quote

is there any way i can do this to the cart too?

Add the following to Design > Custom CSS.

#cart {

  background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' );
  
  }

This is for v7.1.

SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know.

Let us know how it goes.

yasminva · March 10, 2021

13 hours ago, creedon said:
Add the following to Design > Custom CSS.
#cart {

  background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' );
  
  }
This is for v7.1.

SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know.

Let us know how it goes.

thank you so much! i will check back on monday about that

sorry one more question, i was wondering you can help me with a custom css for the font in the cart

a) when the cart is empty, i would like the message that appears to all be in lowercase (you have nothing in your shopping cart. continue shopping)

b)when there is an item in the cart, the font to be smaller to 14px across the entire contents of the cart table and the word 'subtotal' to be in lowercase too

creedon · March 10, 2021

Add the following to Design > Custom CSS.

/*

  begin change cart style
  
  SS Version : 7.1
  
  */
  
  #cart .empty-message,
  ._3qWE9VU-U /* subtotal label */
  
    {
    
      text-transform : lowercase;
      
      }
      
  ._3qWE9VU-U, /* subtotal label */
  ._2JFeDgZcv, /* subtotal amount */
  .item-price,
  .item-quantity input,
  ._1MDgZZPKX a /* item title */
  
    {
    
      font-size : 14px !important;
      
      }
      
  /* end change cart style */

This is for v7.1.

Let us know how it goes.

Edited March 19, 2021 by creedon
version 2, post 20210316 SS cart update

yasminva · March 10, 2021

49 minutes ago, creedon said:

Add the following to Design > Custom CSS.



/*

  begin change cart style
  
  SS Version : 7.1
  
  */
  
  #cart .empty-message,
  .CartTable-subtotalLabel-3qWE9
  
    {
    
      text-transform : lowercase;
      
      }
      
  .CartTable-subtotalLabel-3qWE9,
  .CartTable-subtotalPrice-2JFeD,
  .CartTableRow-itemPrice-26eXS,
  .CartTableRow-itemQuantity-LwuRx input,
  .CartTableRow-itemTitle-1MDgZ a
  
    {
    
      font-size : 14px;
      
      }
      
  /* begin change cart style */

This is for v7.1.

Let us know how it goes.

hey, so the lowercase bit worked but the font size hasn't

thank you for helping me with all of this

creedon · March 10, 2021

I've updated my previous code post.

yasminva · March 11, 2021

23 hours ago, creedon said:

I've updated my previous code post.

thank you so much for helping! is it possible to add this background to the dropdown menu on the mobile version?

and how to make the word 'store' on the store page on the mobile version centered as it is on the left side at the moment

Edited March 11, 2021 by yasminva

creedon · March 11, 2021

Quote

possible to add this background to the dropdown menu on the mobile version?

Add the following to Design > Custom CSS.

body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg {

  background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' );
  
  }

Let us know how it goes.

yasminva · March 12, 2021

13 hours ago, creedon said:

Add the following to Design > Custom CSS.


body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg {

  background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' );
  
  }

Let us know how it goes.

thank you that worked!

msdema · March 15, 2021

On 3/9/2021 at 6:01 PM, creedon said:
Add the following to Design > Custom CSS.
#cart {

  background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613944671508-Z9VP0X5DR8NIEI2T5LDG/ke17ZwdGBToddI8pDm48kDWP3gmucGRB0yXrnRBaA0IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKctE33n1k81jz6V5pOZAidoxUteKerJ8jQ0TKogSrQ8T0N_s2rOL5F7xV7-0hZeKWQ/zeroninebackground.jpg' );
  
  }
This is for v7.1.

SS is going to update the cart code this coming Monday. So do check if this code breaks and let us know.

Let us know how it goes.

is there any way to do these things for 7.0 websites (Brine in particular)?

creedon · March 15, 2021

1 hour ago, msdema said:

is there any way to do these things for 7.0 websites (Brine in particular)?

Please post the URL for your site and describe which pages you want a background image on. We also need to have the URL for the background image(s) that you want to use.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

msdema · March 15, 2021

57 minutes ago, creedon said:

Please post the URL for your site and describe which pages you want a background image on. We also need to have the URL for the background image(s) that you want to use.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

thank you so much! the website is www.mimiceramics.com (it's public)

i'm hoping to take the background from my makeshift "cover page", and have that as the background for products page, product details pages, about, etc etc. instead of a solid color. thank you!

creedon · March 15, 2021

@msdema

Add the following to Design > Custom CSS.

.Main-content {

  background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png );
  
  }

This for v7.0 using the Brine template family.

Let us know how it goes.

msdema · March 15, 2021

7 minutes ago, creedon said:
@msdema

Add the following to Design > Custom CSS.
.Main-content {

  background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png );
  
  }
This for v7.0 using the Brine template family.

Let us know how it goes.

dang i tried that but it's not bleeding all the way up and down behind the footer and header. i think it might have something to do with the other css i've put in there. i'll keep trying!

another quick Q: i used css to make my header fixed and have a mix-blend-mode, but it's not working on product details pages. is that a css fix and where would i put it?

thanks again!!

creedon · March 15, 2021

On 3/15/2021 at 1:14 PM, msdema said:

dang i tried that but it's not bleeding all the way up and down behind the footer and header.

Right. I assumed that since you had a header and footer background image I just went after the bit in the middle. So it sounds like what you want is something like a background image on the body tag. Get rid of, comment out, the other CSS effects for head, main, footer areas.

Let's get one thing fixed and then move onto the next.

Edited March 23, 2021 by creedon

msdema · March 17, 2021

On 3/15/2021 at 1:51 PM, creedon said:

Right. I assumed that since you had a header and footer background image I just went after the bit in the middle. So it sound like what you want is something like a background image on the body tag. Get rid of, comment out, the other CSS effects for head, main, footer areas.

Let's get one thing fixed and then move onto the next.

ok awesome, it's all commented out. if you need to look at the website i put it in private mode and the password is 1234

i plugged in the css for the full background, but it's not bleeding to the top/bottom.

am i still able to have a header with the logo and such, but a transparent background? i had code for a custom user icon, cart, and making the header fixed and with a difference mix-blend-mode.

thank you again!

creedon · March 17, 2021

@msdema

Here is a start on putting a background image on the body tag.

body {

  background-image : url( https://static1.squarespace.com/static/57505fc44d088e7a8a88a704/t/6049c4cf3518925ff840500c/1615447250260/banner.png );
  background-repeat : no-repeat;
  background-size : cover;
  
  }

#new-page,
.Header--bottom,
.Intro,
.Main

  {
  
    background-color : unset;
    
    }

Now this doesn't look good on contact and about because those pages have images that have been added through the SS interface. Remove those images and I think those pages will be OK. If not we can probably add more CSS to take care of them.

Let us know how it goes.

msdema · March 17, 2021

amazing thank you, that worked! i did just what you said, took all the coding out and then added things back one at a time. and then got rid of the things that didn't work or messed up the page. and now it looks great to me 🙂

i appreciate it so much!

yasminva · March 19, 2021

On 3/10/2021 at 7:44 PM, creedon said:

Add the following to Design > Custom CSS.


/*

  begin change cart style
  
  SS Version : 7.1
  
  */
  
  #cart .empty-message,
  .CartTable-subtotalLabel-3qWE9
  
    {
    
      text-transform : lowercase;
      
      }
      
  .CartTable-subtotalLabel-3qWE9,
  .CartTable-subtotalPrice-2JFeD,
  .CartTableRow-itemPrice-26eXS,
  .CartTableRow-itemQuantity-LwuRx input,
  .CartTableRow-itemTitle-1MDgZ a
  
    {
    
      font-size : 14px !important;
      
      }
      
  /* begin change cart style */

This is for v7.1.

Let us know how it goes.

hey, this has seemed to stop working on desktop, any way to fix it?

creedon · March 19, 2021

Quote

hey, this has seemed to stop working on desktop, any way to fix it?

SS updated their cart code last Tuesday so this is why it broke. I have updated my code post for the cart style changes.

Let us know how it goes.

yasminva · March 19, 2021

44 minutes ago, creedon said:

SS updated their cart code last Tuesday so this is why it broke. I have updated my code post for the cart style changes.

Let us know how it goes.

thank you very much!

Adding an image as the background on both the store page and the individual product pages (hawley)

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon

creedon

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources