Background Overlays

This content is intended for SpotOn Website customers whose Website was created prior to October 2023. For customers of SpotOn Website after October 2023, please visit this FAQ for assistance.

Quick Links

1 Background Overlays
- 1.1 To add a body background
- 1.2 To add an overlay as an individual section background

In addition to the built-in overlay in the section settings, you can set different colors and degrees of overlay to individual section backgrounds in order to improve text readability.

This trick only works when you have a body background.

To add a body background

Action

Action

Open the Design toolbar by clicking the wand icon on the main menu.
Select Styles.
Under Content, select Body Background.
Upload a background image. Learn more.
Save and confirm changes.

Once you have added a body background you can add different degrees and colors of overlay as individual section backgrounds. This will help your text pop out when you need it to.

To add an overlay as an individual section background

Action	Display

Action	Display
Position your mouse over the section you wish to edit and go to the section settings. Click on the box next to the background to open the background editor. In the color tab, select the color you wish to use as an overlay. You can adjust the transparency of the color by adding any of the codes below to the end of the HEX Code.
For example, if you want the color white to be at 50% transparency, we would add the 50% code (80) to the end of the white code (#FFFFFF) resulting in the HEX code #FFFFFF80. With this code, the color white will be at 50% opacity and the body background will be visible behind it at 50%. Try different degrees of opacity using these codes.

Opacity Level Codes

Opacity Level Codes
Add these codes to the end of the HEX code to control opacity.
100% = FF	80% = CC	60% = 99	40% = 66	20% = 33
99% = FC	79% = C9	59% = 96	39% = 63	19% = 30
98% = FA	78% = C7	58% = 94	38% = 61	18% = 2E
97% = F7	77% = C4	57% = 91	37% = 5E	17% = 2B
96% = F5	76% = C2	56% = 8F	36% = 5C	16% = 29
95% = F2	75% = BF	55% = 8C	35% = 59	15% = 26
94% = F0	74% = BD	54% = 8A	34% = 57	14% = 24
93% = ED	73% = BA	53% = 87	33% = 54	13% = 21
92% = EB	72% = B8	52% = 85	32% = 52	12% = 1F
91% = E8	71% = B5	51% = 82	31% = 4F	11% = 1C
90% = E6	70% = B3	50% = 80	30% = 4D	10% = 1A
89% = E3	69% = B0	49% = 7D	29% = 4A	9% = 17
88% = E0	68% = AD	48% = 7A	28% = 47	8% = 14
87% = DE	67% = AB	47% = 78	27% = 45	7% = 12
86% = DB	66% = A8	46% = 75	26% = 42	6% = 0F
85% = D9	65% = A6	45% = 73	25% = 40	5% = 0D
84% = D6	64% = A3	44% = 70	24% = 3D	4% = 0A
83% = D4	63% = A1	43% = 6E	23% = 3B	3% = 08
82% = D1	62% = 9E	42% = 6B	22% = 38	2% = 05
81% = CF	61% = 9C	41% = 69	21% = 36	1% = 03

For further assistance, contact us at website@spoton.com or at (415) 306-9522.