$w.Background

$w.Background

Provides functionality for background images in certain elements.

Contents

background Gets an object containing information about the element's background.
BackgroundOptions An object used by the background property that contains the background options.
background

background

Gets an object containing information about the element's background.

Syntax

get background(): BackgroundOptions

Type

BackgroundOptions

Examples

Get the background information

bGV0IGJhY2tncm91bmRPcHRzID0gJHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kOwoKbGV0IGJnU3JjID0gYmFja2dyb3VuZE9wdHMuc3JjOwovLyAid2l4OmltYWdlOi8vdjEvNjhkM2E5XzFkZTc1MjljNDQ0YjRjOWViMzg0MDFmOGVmZTBjYWQyLmpwZy9mbG93ZXJzLmpwZy8jb3JpZ2luV2lkdGg9MTk3MCZvcmlnaW5IZWlnaHQ9MTEyMCIK
let backgroundOpts = $w("#myElement").background;

let bgSrc = backgroundOpts.src;
// "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120"

Set the background image to be an image from the Media Manager

JHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kLnNyYyA9ICJ3aXg6aW1hZ2U6Ly92MS82OGQzYTlfMWRlNzUyOWM0NDRiNGM5ZWIzODQwMWY4ZWZlMGNhZDIuanBnL2Zsb3dlcnMuanBnLyNvcmlnaW5XaWR0aD0xOTcwJm9yaWdpbkhlaWdodD0xMTIwIjsK
$w("#myElement").background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120";

Set the background image to be an image from the web

JHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kLnNyYyA9ICJodHRwOi8vcGxhY2Vob2xkLml0LzI1MHgyNTAiOwo=
$w("#myElement").background.src = "http://placehold.it/250x250";
BackgroundOptions

BackgroundOptions

An object used by the background property that contains the background options.

Description

Setting the src property of the BackgroundOptions object changes the displayed image or video to the image or video found at the new src value.

Getting the src property of the BackgroundOptions object returns the location of the current image or video file.

Images can either be from the Media Manager or an external image from any web location. Videos must come from the Media Manager.

The URL formats supported are:

  • Images from the Media Manager: wix:image://v1/<uri>/<filename>/#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
  • Videos from the Media Manager: wix:video://v1/<video_uri>/<filename>/#posterUri=<poster_uri>&posterWidth=<width>&posterHeight=<height>
  • Images from the web: http(s)://<image url>

Properties

src String The file location of the background image or video.

Examples

Get the background information

bGV0IGJhY2tncm91bmRPcHRzID0gJHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kOwoKbGV0IGJnU3JjID0gYmFja2dyb3VuZE9wdHMuc3JjOwovLyAid2l4OmltYWdlOi8vdjEvNjhkM2E5XzFkZTc1MjljNDQ0YjRjOWViMzg0MDFmOGVmZTBjYWQyLmpwZy9mbG93ZXJzLmpwZy8jb3JpZ2luV2lkdGg9MTk3MCZvcmlnaW5IZWlnaHQ9MTEyMCIK
let backgroundOpts = $w("#myElement").background;

let bgSrc = backgroundOpts.src;
// "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120"

Set the background image to be an image from the Media Manager

JHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kLnNyYyA9ICJ3aXg6aW1hZ2U6Ly92MS82OGQzYTlfMWRlNzUyOWM0NDRiNGM5ZWIzODQwMWY4ZWZlMGNhZDIuanBnL2Zsb3dlcnMuanBnLyNvcmlnaW5XaWR0aD0xOTcwJm9yaWdpbkhlaWdodD0xMTIwIjsK
$w("#myElement").background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120";

Set the background image to be an image from the web

JHcoIiNteUVsZW1lbnQiKS5iYWNrZ3JvdW5kLnNyYyA9ICJodHRwOi8vcGxhY2Vob2xkLml0LzI1MHgyNTAiOwo=
$w("#myElement").background.src = "http://placehold.it/250x250";

See Also

background