@yola/ws-component-background-container NPM | npm.io

4.2.0-maleks.rc.2 • Published 1 year ago

Install

Weekly downloads

-

License

-

Repository

Last release

1 year ago

ws-background-container

Custom element that allows you emulate css background-size: cover; property and configure it's display and positioning.

Usage

Set src attribute with any url and it will display it as css background cover property

<section style="position: relative;">
  <ws-background-container src="./test.png" content-position="50% 50%" content-scale="1.5">
  </ws-background-container>
</section>

Attributes

Title	Example	Description
`position`	`"40% 70%"`	Percentage coordinates. Indicates the point on the picture or video that will aim to be placed in the center of the container.
`scale`	`"1.2"`	Scales the media inside container. It's recommended to use values from `1` to `3`.
`src`	`"http://image.com"`	Image source

Requirements

In order for the component to work correctly it should be inside element with position set to relative and also you need to add these styles to your page:

ws-background-container {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

intersection-observer resize-observer-polyfill

@infinitebrahmanuniverse/nolb-_yol @everything-registry/sub-chunk-1042

1 year ago

4.2.0-maleks.rc.2

1 year ago

4.2.0-maleks.rc.1

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3.2.0-raffa.rc.3

4 years ago

3.2.0-raffa.rc.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

2.0.3-rc.alex.1

5 years ago

5 years ago

5 years ago

5 years ago

1.4.0-maleks.rc.1

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago