Xiaomi Vela JS APP

# Background Image Style

When adding an image as a background for a page component, developers can adjust the size, repetition mode, and placement of the image background.

# background-size Property

This property defines the size of the background image.

The number of parameters can be one or two.

The list of valid parameters is as follows:

Parameter Description
contain Scales the background image proportionally to fit entirely within the container, possibly leaving some empty space in the container (only as a single parameter).
cover Scales the background image proportionally to cover the entire container, possibly making parts of the background image invisible (only as a single parameter).
auto Indicates that the original dimensions of the image remain unchanged. Note that the original dimensions are in physical resolution, consistent with the resolution unit of mobile phone screens, not the 1px length in JS applications.
<length> Describes the specific dimensions of the image, in units of px or dp. Floating-point calculations are not supported, and floating-point values will be floored.
<percent> Describes the percentage of the image's dimensions relative to the corresponding dimensions of the container. Floating-point calculations are not supported, and floating-point values will be floored.

When there are two parameters, the first parameter is interpreted as the width along the horizontal axis, and the second parameter is interpreted as the height along the vertical axis. If there is only one parameter, auto is supplemented as the second parameter, and then parsed according to the rules for two parameters.

Invalid parameters are uniformly interpreted as the default value auto, i.e., the original image dimensions.

Example

<template>
  <div class="page">
    <text>Image size 128 * 128</text>
    <text>Background container 300 * 200</text>
    <image src= "../../common/logo.png">
    <div class="imgBg"></div>
  </div>
</template>
<style>
  .page {
    flex-direction: column;
    align-items: center;
    background-color: #000;
  }
  text {
    color: #fff;
    font-size: 24px;
  }
  .imgBg {
    width: 300px;
    height: 200px;
    margin-top: 20px;
    border: 2px solid yellowgreen;
    background-color: yellowgreen;
    background-image: url('../../common/logo.png');
    background-size: 300px 200px;
    background-repeat: no-repeat; // Not yet supported, recommended to include in case support is added later to prevent style display anomalies
  }
</style>

Effect

# background-repeat Property (Not yet implemented)

This property defines how the background image is repeated within the component. The background image can be repeated along the horizontal axis, vertical axis, both axes, or not repeated.

The number of parameters is one.

The list of valid parameters is as follows:

Parameter Description
repeat Repeats the image both horizontally and vertically.
repeat-x Repeats the image only horizontally.
repeat-y Repeats the image only vertically.
no-repeat Does not repeat the image.

Invalid parameters are interpreted as the default value, i.e., repeat.

Example

<div class="container">
  <div class="img"></div>
</div>

<style>
  .container {
    width: 365px;
    height: 365px;
    background-color: #c7c7c7;
  }
  .img {
    width: 100%;
    height: 100%;
    background-image: url('../common/logo.png');
    /* Proportionally scales the background image to half the width of the component */
    background-size: 50%;
    /* Repeats the image both horizontally and vertically */
    background-repeat: repeat;
    /* Centers the background image within the component */
    background-position: center;
  }
</style>

.img {
  width: 100%;
  height: 100%;
  background-image: url('../common/logo.png');
  /* Proportionally scales the background image to a width of 100px */
  background-size: 100px;
  /* Does not repeat the background image */
  background-repeat: no-repeat;
  /* Positions the background image 20px from the left edge of the component and at a 3:7 ratio from the top and bottom edges */
  background-position: left 20px top 30%;
}

# background-position Property

This property defines the position of the background image within the component.

It can be defined using 1-4 values. If two non-keyword values are used, the first value represents the horizontal position, and the second value represents the vertical position. If only one value is specified, the second value defaults to center. If three or four values are used, the length percentage values are offsets from the preceding keyword values.

Syntax with one value:

The value can be:

  • The keyword center, used to center the background image.
  • One of the keywords top, left, bottom, right, used to specify which boundary to place the background image against. The other dimension is set to 50%, so the background image is centered in that dimension.
  • <length> or <percentage>, specifying the x-coordinate relative to the left boundary. The y-coordinate is set to 50%, centering the background image along the y-axis.

Syntax with two values:

One defines the x-coordinate, and the other defines the y-coordinate. Each value can be:

  • One of the keywords top, left, bottom, right. If left or right is given here, this value defines the x-axis position, and the other value defines the y-axis position. If top or bottom is given here, this value defines the y-axis position, and the other value defines the x-axis position.
  • <length> or <percentage>. If the other value is left or right, this value defines the y relative to the top boundary. If the other value is top or bottom, this value defines the x relative to the left boundary. If both values are <length> or <percentage> values, the first defines X, and the second defines Y.

Note: If one value is top or bottom, the other value cannot be top or bottom. If one value is left or right, the other value cannot be left or right. That is, for example, top top and left right are invalid.

Ordering: When pairing keywords, the position does not matter; writing top left or left top produces the same effect. When pairing <length> or <percentage> with a keyword, the order is important; the value defining X is placed first, followed by the value defining Y. right 20px and 20px right have different effects; the former is valid, but the latter is not. left 20% or 20% bottom are valid because the X and Y values are clearly defined and in the correct position.

Default values are left top or 0% 0%.

Syntax with three values:

Two values are keyword values, and the third is an offset from the preceding values:

  • The first value is one of the keywords top, left, bottom, right, or center. If set to left or right, X is defined. If set to top or bottom, Y is defined, and the other keyword value defines X.
  • <length> or <percentage>, if the second value, is an offset from the first value. If the third value, is an offset from the second value.
  • A single length or percentage value is an offset from its preceding keyword value. A combination of one keyword with two <length> or <percentage> values is invalid.

Syntax with four values:

The first and third values are keyword values defining X and Y. The second and fourth values are offsets from the preceding X and Y keyword values:

  • The first and third values are one of the keyword values top, left, bottom, right. If set to left or right, X is defined. If set to top or bottom, Y is defined, and the other keyword value defines X.
  • The second and fourth values are <length> or <percentage>. The second value is an offset from the first keyword. The fourth value is an offset from the second keyword.

Invalid parameters are all interpreted as the default value (0px, 0px), i.e., the image is displayed in the top-left corner of the component.

Example

<template>
  <div class="page">
    <text>Image size 128 * 128</text>
    <text>Background container 300 * 200</text>
    <image src= "../../common/logo.png">
    <div class="imgBg"></div>
  </div>
</template>
<style>
  .page {
    flex-direction: column;
    align-items: center;
    background-color: #000;
  }
  text {
    color: #fff;
    font-size: 24px;
  }
  .imgBg {
    width: 300px;
    height: 200px;
    margin-top: 20px;
    border: 2px solid yellowgreen;
    background-color: yellowgreen;
    background-image: url('../../common/logo.png');
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat; // Not yet supported, recommended to include in case support is added later to prevent style display anomalies
  }
</style>

Effect

# Support Details

Device Product Description
Xiaomi S1 Pro Sports Health Watch Not supported
Xiaomi Band 8 Pro Not supported
Xiaomi Band 9 / 9 Pro Not supported
Xiaomi Watch S3 Not supported
Redmi Watch 4 Not supported
Xiaomi Wrist ECG Blood Pressure Monitor Not supported
Xiaomi Band 10 Supported
Xiaomi Watch S4 Supported
REDMI Watch 5 Supported

← Common Attributes →

On This Page
background-size Property
background-repeat Property (Not yet implemented)
background-position Property
Support Details