Allow set survey background image using JSON and Creator

packages/survey-angular-ui/src/survey-content.component.html

@@ -1,6 +1,6 @@
 <ng-template #template>
-  <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()">
-    <form onsubmit="return false;">
+  <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style.backgroundImage]="model.renderBackgroundImage">
+    <form onsubmit="return false;" [style.backgroundColor]="model.renderBackgroundOpacity">
       <div class="sv_custom_header" [hidden]="model.hasLogo"></div>
       <div [class]="model.css.container">
         <div *ngIf="model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>

src/knockout/templates/index.html

@@ -4,8 +4,8 @@
 </script>
 
 <script type="text/html" id="survey-content-template">
-  <div data-bind="css: rootCss">
-      <form onsubmit="return false;">
+  <div data-bind="css: rootCss, style: { backgroundImage: renderBackgroundImage }">
+      <form onsubmit="return false;" data-bind="style: { backgroundColor: renderBackgroundOpacity }">
           <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>
           <div data-bind="css: containerCss">
               <!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } -->

src/react/reactSurvey.tsx

@@ -103,10 +103,16 @@ export class Survey extends SurveyElementBase<any, any>
     }
     const rootCss = this.survey.getRootCss();
     const cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
+    const rootStyle = {
+      backgroundImage: this.survey.renderBackgroundImage
+    };
+    const formStyle = {
+      backgroundColor: this.survey.renderBackgroundOpacity
+    };
 
     return (
-      <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses}>
-        <form onSubmit={onSubmit}>
+      <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={rootStyle}>
+        <form onSubmit={onSubmit} style={formStyle}>
           {customHeader}
           <div className={this.css.container}>
             {header}

src/survey.ts

@@ -777,6 +777,7 @@ export class SurveyModel extends SurveyElementCore
     this.createHtmlLocString("completedBeforeHtml", "completingSurveyBefore", htmlCallBack);
     this.createHtmlLocString("loadingHtml", "loadingSurvey", htmlCallBack);
     this.createLocalizableString("logo", this, false);
+    this.createLocalizableString("backgroundImage", this, false);
     this.createLocalizableString("startSurveyText", this, false, true);
     this.createLocalizableString("pagePrevText", this, false, true);
     this.createLocalizableString("pageNextText", this, false, true);
@@ -1873,6 +1874,31 @@ export class SurveyModel extends SurveyElementCore
     }
     return "";
   }
+  /**
+   * Gets or sets a survey backgroundImage.
+   */
+  public get backgroundImage(): string {
+    return this.getLocalizableStringText("backgroundImage");
+  }
+  public set backgroundImage(value: string) {
+    this.setLocalizableStringText("backgroundImage", value);
+  }
+  get locBackgroundImage(): LocalizableString {
+    return this.getLocalizableString("backgroundImage");
+  }
+  get renderBackgroundImage(): string {
+    return ["url(", this.getLocalizableString("backgroundImage").renderedHtml, ")"].join("");
+  }
+  public get backgroundOpacity(): number {
+    return this.getPropertyValue("backgroundOpacity");
+  }
+  public set backgroundOpacity(val: number) {
+    this.setPropertyValue("backgroundOpacity", val);
+  }
+  public get renderBackgroundOpacity(): string {
+    const alpha = 1 - this.backgroundOpacity;
+    return ["rgba(255, 255, 255, ", alpha, ")"].join("");
+  }
   /**
    * HTML content displayed on the [complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page).
    *
@@ -7088,5 +7114,7 @@ Serializer.addClass("survey", [
     choices: ["auto", "static", "responsive"],
   },
   "width",
+  { name: "backgroundImage", serializationProperty: "locBackgroundImage", visible: false },
+  { name: "backgroundOpacity:number", minValue: 0, maxValue: 1, default: 1, visible: false },
   { name: "showBrandInfo:boolean", default: false, visible: false }
 ]);

src/vue/survey.vue

@@ -1,6 +1,10 @@
 <template>
-  <div :class="survey.getRootCss()">
-    <form onsubmit="return false;">
+  <div :class="survey.getRootCss()"
+    :style="{ backgroundImage: vueSurvey.renderBackgroundImage }"
+    >
+    <form onsubmit="return false;"
+    :style="{ backgroundColor: vueSurvey.renderBackgroundOpacity }"
+    >
       <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
       <div :class="css.container">
         <survey-header :survey="vueSurvey" />

tests/surveytests.ts

@@ -16746,3 +16746,15 @@ QUnit.test("Use variables as default values in expression", function (assert) {
   assert.equal(q2.value, "BBB", "q2.value");
   assert.equal(q3.value, "CCC", "q3.value");
 });
+
+QUnit.test("backgroundImage backgroundOpacity", assert => {
+  const imageUrl = "https://image.shutterstock.com/image-photo/agave-cactus-abstract-natural-pattern-600w-1056037874.jpg";
+  const survey = new SurveyModel({
+    "backgroundImage": imageUrl,
+    "backgroundOpacity": 0.6,
+  });
+  assert.equal(survey.backgroundImage, imageUrl, "backgroundImage");
+  assert.equal(survey.renderBackgroundImage, ["url(", imageUrl, ")"].join(""), "renderBackgroundImage");
+  assert.equal(survey.backgroundOpacity, 0.6, "backgroundOpacity");
+  assert.equal(survey.renderBackgroundOpacity, "rgba(255, 255, 255, 0.4)", "renderBackgroundOpacity");
+});

visualRegressionTests/tests/defaultV2/survey.ts

@@ -1,6 +1,7 @@
 import { Selector, ClientFunction } from "testcafe";
 import { setData } from "../../../testCafe/helper";
 import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, explicitErrorHandler } from "../../helper";
+import { backgroundImage } from "../../constants";
 
 const title = "Survey Screenshot";
 
@@ -221,6 +222,28 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-title-with-logo.png", Selector(".sd-title"), t, comparer); // without title and progress
     });
 
+  });
+  test("Check survey with backgroundImage", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1280, 900);
+      await initSurvey(framework, {
+        "backgroundImage": backgroundImage,
+        "backgroundOpacity": 0.7,
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ]
+          }
+        ]
+      });
+      await takeElementScreenshot("survey-with-backgroundImage.png", Selector(".sd-root-modern"), t, comparer);
+    });
+
   });
   test("Check survey navigation bar", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {