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%.
## Add a Logo to the Form Header
A form header usually consists of a form title, short description, and a logo of your company. However, all these elements are optional. In this demo, the form header contains only a logo. To add and configure a logo for your form in Survey Creator, use editors in the **Logo in the Survey Header** category.
These editors are mapped to the following survey JSON properties:
- [`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 position your logo within a form header, use Theme Editor integrated in Survey Creator. Open the Themes tab, switch to the **Header** category in Property Grid, and use the **Logo alignment** editors to align your logo as required. Ensure that the **View** switch is set to "Advanced".
You can also use other editors within the **Header** category to configure the form header in greater detail. 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 an Image Picker for Color Selection
[Image Picker](/form-library/examples/image-picker-question/) is a question type that allows respondents to select one or more images from a predefined image collection. Image Picker can be integrated with other question types, for instance, an [Image](/form-library/examples/add-image-and-video-to-survey/) question. In this demo, Image Picker displays a collection of colors from which respondents can select, and Image displays a product (t-shirt, jacket, or sneakers) in the selected color.
To implement this functionality, you will need several images that illustrate colors and an equal number of images that illustrate a product in these colors. Host all the images on a server and get their URLs. In Survey Creator, add an Image Picker question to the design surface and expand the **Choices** category in Property Grid. You should see a table that specifies the images that Image Picker contains. Paste *color image URLs* to the **Image or video file URL** column and *product image URLs* to the **Value** column.
In a survey JSON schema, the **Choices** table is mapped to the [`choices`](/form-library/documentation/api-reference/image-picker-question-model#choices) array of objects. **Image or video file URL** column values are saved in the `imageLink` property within these objects; **Value** column values are saved in the `value` property.
With this configuration, Image Picker displays predefined colors, allows users to select them, and saves the URL of a product image in the selected color as the [question value](/form-library/documentation/api-reference/image-picker-question-model#value). All that remains is to assign this URL to the Image question for display. Add an Image question to the design surface and insert an expression that references the Image Picker question in the **Image or video file URL** editor. This editor is mapped to the Image's [`imageLink`](/form-library/documentation/api-reference/add-image-to-survey#imageLink) property.
For a code listing, refer to the `survey.json` file and find the `t-shirt` and `t-shirt-colors` questions in it.
## 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 = {
"logo": "https://api.surveyjs.io/private/Surveys/files?name=09c9faa7-52b9-48d7-a155-e01f1dad7e2f",
"logoWidth": "auto",
"logoHeight": "64",
"completedHtml": "Your purchase is on its way. We've sent a confirmation email with order details to your inbox. If you have any inquiries or require further assistance, our customer support team is here to help. \n
\nThanks for choosing us.