How to add a background image to a Squarespace form

Tired of staring at that plain 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 & customize code to make your contact form uniquely yours.

Here are the steps from this tutorial & the codes you'll need to make this magic happen. T see this code in action, watch the video below!

Step one: upload your custom image (website β†’ website tools β†’ custom css β†’ custom files)

Step two: add this CSS code to your custom css panel (website β†’ website tools β†’ custom css)

.sqs-block-form{
background-image: url(image-url-here);
background-size: cover
} 

Step three: update the placeholder url of image-url-here with the url for the image that you uploaded

Step four: pat yourself on the back; you’re a coder now! πŸ™ŒπŸŽ‰

Step five (optional πŸ˜‰) buy me a coffee to say thanks for this free tutorial: buymeacoffee.com/insidethesquare

 
insidethesquare


Grab my collection of custom codes for Squarespace: 
β†’ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to customize a horizontal line in Squarespace

Next
Next

How to customize the file upload field in a Squarespace form