Colour Behind Text, Atop Background Image - SquareSpace 7.1

Part of the beauty of SquareSpace is the ability to create simple image backgrounds with ease. Sometimes, these are overused. Often, people will put text atop an image background that is barely legible due to the text blending into the image. There are a few fixes for this (increased opacity, for example). Today, I will show you how to create a ‘card’: a coloured background behind your text that does not completely cover the image background.

Note: This requires the use of code injection. Code injection is only available on Business plans and above at the time of this post. Code injection may lead to unexpected consequences. Use our contact page to get in touch if you would like a professional to implement this for you instead!

The snippet below utilizes a page-section data-section-id. If you do not know how to locate this, refer to the SquareSpace documentation or give us a shout and we will be happy to customize your site for you!

<style>
  .page-section[data-section-id="your-id-here"] .content {
    background-color: #f5f5f4;  /* Customize this to whatever colour you want! */
    padding-top: 28px;
    padding-bottom: 28px;
  }
</style>