Background color and image

[2create]

Hi,

I have two questions.

Q1. How can I change the background color of my Caspio form?

Q2. How can I add a background image to my Caspio form?

Thank you in advance:)

Susie

[bahar_vm]

Hi Susie,

You can change a Web Form background color or add a background image by editing the Style which is applied to that Web Form.

Edit the Style, Enable Advanced Options and go to the Settings page; Go to Forms/Details >> layout and click on Source tab then in the .cbFormTable class you can insert the following lines:

background-color: green;

background-image: URL;

Note: replace URL with the complete URL of the image hosted in your server.

Best,

Bahar M.

[brucepeaslee]

I have the same question, but the answer doesn't work for me. No matter what I try, the background stays white. The above posts are relatively old - is there a newer solution?

Thanks.

EDIT: I had previously obtained one of the sample apps (Business Directory) and noticed that one of the forms was transparent. Modifying the default style for that app solved my problem, but I was not able to see how it worked, so my question remains.

[HongTaiLang]

If you would like to change the Background color of Form/Details DataPages, here are two suggestions:

1. Add the following style within the head tag of your HTML page:

<style type="text/css">
.cbFormTableRow
{
background-color: #000000;
}
.cbFormTableEvenRow
{
background-color: #000000;
}
</style>

2. Add "background-color: #000000;" in the following classes of Style Source tab

.cbFormTable

.cbFormTableRow

.cbFormTableRow_hover

.cbFormTableEvenRow

.cbFormTableEvenRow_hover

If you would like to add transparent Background image of Form/Details DataPages:

Add the following style in the header of your DataPage:

<style type="text/css">
body
{
background: url('YourImageURL') no-repeat fixed center;
background-size:100% 100%;
}
.cbFormTable
{
opacity:0.6;
filter:alpha(opacity=60);
}
</style>

[Kurumi]

Hi @2create, 

You might want to check these links for howto articles:
https://howto.caspio.com/styles/gradient-backgrounds-for-datapages/
https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/
https://howto.caspio.com/faq/styles-and-localization/how-to-use-an-image-as-form-background/

I hope this helps!