Jump to content

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

Go to solution Solved by creedon,

Recommended Posts

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 by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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 by yasminva
Link to comment
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.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

Link to comment
  • Solution

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 by creedon
version 2, post 20210316 SS cart update

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

Link to comment
  • Susana_SQSP changed the title to Adding an image as the background on both the store page and the individual product pages (hawley)
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 by yasminva
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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!

Link to comment
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)?

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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!

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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!!

Link to comment
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 by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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!

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

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.