How to add a background image to a Squarespace form
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Tired of staring at that plain white background on your contact form?
Let's add a gorgeous custom background image with a few lines of code!
This tutorial will teach you how to upload the image & customzie the code to make your contact forms uniquely yours.
If this is your first time using CSS for Squarespace, awesome! 🙌 I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
Video tutorial
Code Example
Step one: upload your custom image (website → website tools → custom css → custom files)
Step two: add this CSS code to your website
.sqs-block-form{
background-image: url(image-url-here);
background-size: cover
}
Step three: update the placeholder url in bold with the url for the image that you uploaded
Step four: pat yourself on the back; you’re a coder now! 🙌🎉
Want to add an image to a specific form?
You can use a block ID or install the code on a single page. Check out the related content links below to learn more:
