Jump to content

Background image for store page

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, mbrimb said:

Site URL: https://nicnacmakes.ca/shop

Unable to add a background image to my store page in CSS. 

I've tried everything that I've read on this forum and still cant seem to make it work 😞

 

Do You mean adding an image as the background to the whole store page?

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@mbrimb Try adding to Design > Custom CSS

/* Shop page background image */
body#collection-60ec8e381cff58014d547689 {
.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
8 hours ago, tuanphan said:

@mbrimb Try adding to Design > Custom CSS

/* Shop page background image */
body#collection-60ec8e381cff58014d547689 {
.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

 

Still no change - stays the same background colour with no image.

Link to comment
On 10/7/2021 at 11:49 PM, mbrimb said:

Still no change - stays the same background colour with no image.

Hi,

Can you add & keep the code in Custom CSS? We can check it easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/11/2021 at 1:17 AM, mbrimb said:

Yep! I haven't taken it out.

ah, the code has a typo ☹️

use this new code

/* Shop page background image */
body#collection-60ec8e381cff58014d547689 {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, tuanphan said:

ah, the code has a typo ☹️

use this new code

/* Shop page background image */
body#collection-60ec8e381cff58014d547689 {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

 

It worked!!!! Thank you thank you!

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.