Configuration backgroundImage

An object exposing options for setting a background image for the panorama.

Type: Object

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height:100%;">
    <div dx-panorama="{
        title: 'Online restaurant',
        dataSource: panoramaData,
        onItemClick: processItemClick,
        backgroundImage: {
            url: '/Content/images/panorama_bg.png',
            height: 407,
            width: 500
        }
    }" dx-item-alias="itemObj">
        <div data-options="dxTemplate : { name: 'item' } ">
            <div>{{itemObj.text}}</div>
            <div>
                <img ng-repeat="image in itemObj.images" ng-attr-src="{{image.src}}" />
            </div>
        </div>
    </div>
</div>
var food = {
    desserts: [
        { src: "/content/data/products/06.jpg" },
        { src: "/content/data/products/16.jpg" },
        { src: "/content/data/products/19.jpg" },
        { src: "/content/data/products/21.jpg" },
        { src: "/content/data/products/22.jpg" },
        { src: "/content/data/products/25.jpg" }
    ],
    mainCourses: [
        { src: "/content/data/products/04.jpg" },
        { src: "/content/data/products/05.jpg" },
        { src: "/content/data/products/14.jpg" },
        { src: "/content/data/products/17.jpg" },
        { src: "/content/data/products/23.jpg" },
        { src: "/content/data/products/28.jpg" }
    ],
    seafood: [
        { src: "/content/data/products/46.jpg" },
        { src: "/content/data/products/45.jpg" },
        { src: "/content/data/products/73.jpg" },
        { src: "/content/data/products/30.jpg" },
        { src: "/content/data/products/13.jpg" },
        { src: "/content/data/products/41.jpg" }
    ],
    drinks: [
        { src: "/content/data/products/01.jpg" },
        { src: "/content/data/products/02.jpg" },
        { src: "/content/data/products/24.jpg" },
        { src: "/content/data/products/34.jpg" },
        { src: "/content/data/products/35.jpg" },
        { src: "/content/data/products/38.jpg" }
    ]
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.panoramaData = [
        {
            header: "Main courses",
            text: "First and second course of a meal",
            images: food.mainCourses
        },
        {
            header: "Seafood",
            text: "Seafood: ocean and sea",
            images: food.seafood
        },
        {
            header: "Desserts",
            text: "Desserts: biscuits and cookies",
            images: food.desserts
        },
        {
            header: "Drinks",
            text: "Drinks: Soft vine and tea",
            images: food.drinks
        }
    ];
    $scope.processItemClick = function (e) {
        DevExpress.ui.dialog.alert(e.itemData.text);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div data-bind="dxPanorama: {
        title: 'Online restaurant',
        dataSource: panoramaData,
        onItemClick: processItemClick,
        backgroundImage: {
            url: '/Content/images/panorama_bg.png',
            height: 407,
            width: 500
        }
    }">
    <div data-options="dxTemplate : { name: 'item' } ">
        <div data-bind="text: text"></div>
        <div data-bind="foreach: images">
            <img data-bind="attr: { src: src }" />
        </div>
    </div>
</div>
var food = {
    desserts: [
        { src: "/content/data/products/06.jpg" },
        { src: "/content/data/products/16.jpg" },
        { src: "/content/data/products/19.jpg" },
        { src: "/content/data/products/21.jpg" },
        { src: "/content/data/products/22.jpg" },
        { src: "/content/data/products/25.jpg" }
    ],
    mainCourses: [
        { src: "/content/data/products/04.jpg" },
        { src: "/content/data/products/05.jpg" },
        { src: "/content/data/products/14.jpg" },
        { src: "/content/data/products/17.jpg" },
        { src: "/content/data/products/23.jpg" },
        { src: "/content/data/products/28.jpg" }
    ],
    seafood: [
        { src: "/content/data/products/46.jpg" },
        { src: "/content/data/products/45.jpg" },
        { src: "/content/data/products/73.jpg" },
        { src: "/content/data/products/30.jpg" },
        { src: "/content/data/products/13.jpg" },
        { src: "/content/data/products/41.jpg" }
    ],
    drinks: [
        { src: "/content/data/products/01.jpg" },
        { src: "/content/data/products/02.jpg" },
        { src: "/content/data/products/24.jpg" },
        { src: "/content/data/products/34.jpg" },
        { src: "/content/data/products/35.jpg" },
        { src: "/content/data/products/38.jpg" }
    ]
};

var myViewModel = {
    panoramaData: [
        {
            header: "Main courses",
            text: "First and second course of a meal",
            images: food.mainCourses
        },
        {
            header: "Seafood",
            text: "Seafood: ocean and sea",
            images: food.seafood
        },
        {
            header: "Desserts",
            text: "Desserts: biscuits and cookies",
            images: food.desserts
        },
        {
            header: "Drinks",
            text: "Drinks: Soft vine and tea",
            images: food.drinks
        }
    ],
    processItemClick: function (e) {
        DevExpress.ui.dialog.alert(e.itemData.text);
    }
}
ko.applyBindings(myViewModel);
<div id="myPanorama"></div>
var food = {
    desserts: [
        { src: "/content/data/products/06.jpg" },
        { src: "/content/data/products/16.jpg" },
        { src: "/content/data/products/19.jpg" },
        { src: "/content/data/products/21.jpg" },
        { src: "/content/data/products/22.jpg" },
        { src: "/content/data/products/25.jpg" }
    ],
    mainCourses: [
        { src: "/content/data/products/04.jpg" },
        { src: "/content/data/products/05.jpg" },
        { src: "/content/data/products/14.jpg" },
        { src: "/content/data/products/17.jpg" },
        { src: "/content/data/products/23.jpg" },
        { src: "/content/data/products/28.jpg" }
    ],
    seafood: [
        { src: "/content/data/products/46.jpg" },
        { src: "/content/data/products/45.jpg" },
        { src: "/content/data/products/73.jpg" },
        { src: "/content/data/products/30.jpg" },
        { src: "/content/data/products/13.jpg" },
        { src: "/content/data/products/41.jpg" }
    ],
    drinks: [
        { src: "/content/data/products/01.jpg" },
        { src: "/content/data/products/02.jpg" },
        { src: "/content/data/products/24.jpg" },
        { src: "/content/data/products/34.jpg" },
        { src: "/content/data/products/35.jpg" },
        { src: "/content/data/products/38.jpg" }
    ]
};

$("#myPanorama").dxPanorama({
    dataSource: [
        {
            header: "Main courses",
            text: "First and second course of a meal",
            images: food.mainCourses
        },
        {
            header: "Seafood",
            text: "Seafood: ocean and sea",
            images: food.seafood
        },
        {
            header: "Desserts",
            text: "Desserts: biscuits and cookies",
            images: food.desserts
        },
        {
            header: "Drinks",
            text: "Drinks: Soft vine and tea",
            images: food.drinks
        }
    ],
    itemTemplate: function (itemData, itemIndex, itemElement) {
        itemElement.append("<div>" + itemData.text + "</div>");
        var imageWrapper = $("<div>");
        itemElement.append(imageWrapper);
        for(var i = 0; i<itemData.images.length; i++)
            imageWrapper.append('<img src="' + itemData.images[i].src + '"/>');
    },
    onItemClick: function (e) {
        DevExpress.ui.dialog.alert(e.itemData.text);
    },
    backgroundImage: {
        url: '/Content/images/panorama_bg.png',
        height: 407,
        width: 500
    }
});

height

Specifies the height of the panorama's background image.

Type: Number
Default Value: 0

url

Specifies the URL of the image that is used as the panorama's background image.

Type: String
Default Value: null

width

Specifies the width of the panorama's background image.

Type: Number
Default Value: 0