diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2018-04-27 15:53:02 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2018-04-27 15:53:02 +0200 |
| commit | 4ba0d733458408ee666163792c0dc13ebec41ac4 (patch) | |
| tree | 23a8bc39606be3f2c290929082d0149f210c20f0 /README.md | |
| parent | de41f6cf50a04ee8d8cdca2254ea919e1130590b (diff) | |
| download | perl-software-in-gnu-guix-4ba0d733458408ee666163792c0dc13ebec41ac4.tar perl-software-in-gnu-guix-4ba0d733458408ee666163792c0dc13ebec41ac4.tar.gz | |
add , adds wrapper element around background images/videos/iframes
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 26 |
1 files changed, 14 insertions, 12 deletions
@@ -624,12 +624,13 @@ All CSS color formats are supported, like rgba() or hsl(). #### Image Backgrounds By default, background images are resized to cover the full page. Available options: -| Attribute | Default | Description | -| :--------------------------- | :--------- | :---------- | -| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | -| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | -| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | -| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | +| Attribute | Default | Description | +| :------------------------------- | :--------- | :---------- | +| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | +| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | +| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | +| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | +| data-background-content-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | ```html <section data-background-image="http://example.com/image.png"> <h2>Image</h2> @@ -642,12 +643,13 @@ By default, background images are resized to cover the full page. Available opti #### Video Backgrounds Automatically plays a full size video behind the slide. -| Attribute | Default | Description | -| :--------------------------- | :------ | :---------- | -| data-background-video | | A single video source, or a comma separated list of video sources. | -| data-background-video-loop | false | Flags if the video should play repeatedly. | -| data-background-video-muted | false | Flags if the audio should be muted. | -| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | +| Attribute | Default | Description | +| :--------------------------- | :------ | :---------- | +| data-background-video | | A single video source, or a comma separated list of video sources. | +| data-background-video-loop | false | Flags if the video should play repeatedly. | +| data-background-video-muted | false | Flags if the audio should be muted. | +| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | +| data-background-content-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | ```html <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted> |