background-offset-x & background-offset-y : Background image position offset properties #1780

Issue type

Feature request

Description of new feature

Add properties:

• background-offset-x : The x offset of the background image, measured in percent (e.g. 50%) or pixels (e.g. 10px).
• background-offset-y : The y offset of the background image, measured in percent (e.g. 50%) or pixels (e.g. 10px).

Note that these properties accept arrays of values, like other background image properties, to allow per-image configuration.

Motivation for new feature

This allows for better control of the image position by combining the background position with the background offset. For example, the position can be specified in percent while the offset can be specified in pixels in order to create more precise positioning.

This allows for cases, like the following, where the position is combined with the offset to put a decoration just outside of the node body:

  cy.stylesheet()
     .selector('node')
        .css({
          'label': 'data(id)',
          'background-image': 'images/gnu.svg',
          'background-clip': 'none',
          'background-width': 5,
          'background-height': 5,
          'background-position-x': '50%',
          'background-position-y': '100%',
          'background-offset-x': 0,
          'background-offset-y': 5,
          'bounds-expansion': 5
        })

Note that this example uses bounds-expansion #1782.