Jump to content

Zion Background images

Recommended Posts

  • Replies 6
  • Views 686
  • Created
  • Last Reply
15 minutes ago, jaunevermeer said:

Hi, i would love to know how i could change the background images in the Zion theme. I am able the change the background associated with word but not the background of the section? How should i procced ? This background picture ! 

1.PNG

I dont find a place to change that picture so I suggest you like this, put your image url in place

 for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced
 

.section-background img {
  display: none;
}
.section-background .section-background-overlay {
  background: url(https://i.picsum.photos/id/1054/536/354.jpg?hmac=C-B-1df2hvmy_0qxKf1wqa_ireSURi5axW-JrkzG1Ig) no-repeat;
  background-size: cover;
  opacity: 1 !important;
}

image.thumb.png.ed3a281e9efe96673290530ca4af9ccc.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
Just now, jaunevermeer said:

Suscribed to a account and it still does this 

Capturebug.PNG

Please wrap it inside a style tag 

<style>
	.section-background img {
      display: none;
    }
    .section-background .section-background-overlay {
      background: url(https://i.picsum.photos/id/1054/536/354.jpg?hmac=C-B-1df2hvmy_0qxKf1wqa_ireSURi5axW-JrkzG1Ig) no-repeat;
      background-size: cover;
      opacity: 1 !important;
    }
</style>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 4 months later...
On 8/29/2020 at 8:40 PM, bangank36 said:

Please wrap it inside a style tag 


<style>
	.section-background img {
      display: none;
    }
    .section-background .section-background-overlay {
      background: url(https://i.picsum.photos/id/1054/536/354.jpg?hmac=C-B-1df2hvmy_0qxKf1wqa_ireSURi5axW-JrkzG1Ig) no-repeat;
      background-size: cover;
      opacity: 1 !important;
    }
</style>

 

I am trying to do the same, but why does it have to be CSS code? I have to upgrade my plan for this? That makes no sense and is an inconvenience. 

Link to comment
35 minutes ago, xtrubambinoxpr said:

I am trying to do the same, but why does it have to be CSS code? I have to upgrade my plan for this? That makes no sense and is an inconvenience. 

You can place it as Custom css, it work on personal plan. There is no CMS that can sastify every needs from user, therefore we need custom feature like this one

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.