Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
d2fong opened this issue Apr 13, 2017 · 0 comments

Comments

Projects
None yet
2 participants
@d2fong
Copy link
Member

commented Apr 13, 2017

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
        })

screen shot 2019-01-25 at 4 31 37 pm

Note that this example uses bounds-expansion #1782.

@maxkfranz maxkfranz added this to the future milestone Apr 13, 2017

@maxkfranz maxkfranz modified the milestones: future, 3.4.0 Jan 24, 2019

@maxkfranz maxkfranz self-assigned this Jan 24, 2019

@cytoscape cytoscape deleted a comment from d2fong Jan 25, 2019

@maxkfranz maxkfranz changed the title Background image position offset `background-offset-x` & `background-offset-y` : Background image position offset properties Jan 25, 2019

maxkfranz added a commit that referenced this issue Jan 25, 2019

@maxkfranz maxkfranz closed this Jan 25, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.