These editors are mapped to the following theme JSON schema properties, which you can find in the `theme.js` file:
- [`backgroundImage`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImage): `string`
An image to display as form background. This property accepts a hyperlink or a data URL.
- [`backgroundImageFit`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageFit): `"auto"` | `"contain"` | `"cover"`
A string value that specifies how to resize the background image to fit it into its container. Refer to the description of the [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values) CSS property values on MDN for detailed information on the possible values.
- [`backgroundImageAttachment`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundImageAttachment): `"fixed"` | `"scroll"`
A string value that specifies whether the background image is fixed in its position (as in this demo) or scrolled along with the survey.
- [`backgroundOpacity`](https://surveyjs.io/form-library/documentation/api-reference/itheme#backgroundOpacity): `number`
A value from 0 to 1 that specifies how transparent the background image should be: 0 makes the image completely transparent, and 1 makes it opaque. In Theme Editor, the opacity values are mapped to a scale from 0% to 100%.
## Configure the Form Header
The header of your form typically contains a form title, short description, and a logo of your company. To specify title and description texts, open the Designer tab and enter them in the **Survey title** and **Survey description** editors in the **General** category.
To configure a logo, use editors in the **Logo in the Survey Header** category.
These editors are mapped to the following survey JSON properties:
- [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title)
- [`description`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#description)
- [`logo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo)
- [`logoWidth`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoWidth)
- [`logoHeight`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoHeight)
- [`logoFit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logoFit)
To configure the appearance of the form header, open the Themes tab and use editors in the **Header** category. Ensure that the **View** switch is set to "Advanced". All editors in the Header category, except font editors and View, are mapped to corresponding [`header`](https://surveyjs.io/form-library/documentation/api-reference/iheader) object properties in the theme JSON schema (see the `theme.js` file).
## Use Placeholders for Form Field Titles
If you want to design more compact and neat-looking forms, you can hide form field titles and display title texts as input field placeholders. To implement this layout in your form, follow the steps below:
1. Open the Designer tab.
2. Select a question on the design surface.
3. In the Property Grid, switch to the **General** category.
4. Find and unselect the **Show the title and description** checkbox.
5. Enter the form field title in the **Placeholder text within input field** editor.
In the survey JSON schema, these editors are mapped to a question's [`titleLocation`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#titleLocation) and [`placeholder`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#placeholder) properties.
## Files
### `public/index.html`
```html
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/index.js`
```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import { themeJson } from "./theme";
import "./index.css";
import { json } from "./json";
const survey = new Model(json);
survey.applyTheme(themeJson);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
$("#surveyElement").Survey({ model: survey });
```
### `src/json.js`
```js
export const json = {
"title": "Online Check-in",
"description": "Check-in is available 2 to 24 hours prior to departure for all destinations. To complete the check-in process, please fill out the form below.",
"logo": "https://api.surveyjs.io/private/Surveys/files?name=ee96dc76-ecfb-4b17-8589-493015f1132a",
"logoWidth": "auto",
"logoHeight": "40",
"completedHtml": "Thank you for checking in. Your journey with us is all set. Have a great flight.
\n