
    <!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2008/06/dsc20050102_192118_51.jpg","align":"left","id":761} -->
<div class="wp-block-cover has-background-dim alignleft" style="background-image:url(http://luxury.test/wp-content/uploads/2008/06/dsc20050102_192118_51.jpg)"><p class="wp-block-cover-text">This is a left aligned cover block with a background image.</p></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p>The cover block lets you add text on top of images or videos.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This blocktype has several alignment options, and you can also align or center the text inside the block.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The background image can be fixed and you can change its opacity and add an overlay color.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Make sure that the text wraps correctly over the image, and that text markup and alignments are working.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The next image should have a pink overlay color, the text should be bold and aligned to the left:</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2008/06/canola2.jpg","align":"center","contentAlign":"left","id":611,"overlayColor":"pale-pink"} -->
<div class="wp-block-cover has-pale-pink-background-color has-background-dim has-left-content aligncenter" style="background-image:url(http://luxury.test/wp-content/uploads/2008/06/canola2.jpg)"><p class="wp-block-cover-text"><strong>A center aligned cover image block, with a left aligned text.</strong></p></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2008/06/dsc04563.jpg","align":"full","id":759,"hasParallax":true,"dimRatio":20} -->
<div class="wp-block-cover has-background-dim-20 has-background-dim has-parallax alignfull" style="background-image:url(http://luxury.test/wp-content/uploads/2008/06/dsc04563.jpg)"><p class="wp-block-cover-text">This is a full width cover block with a fixed background image with a 20% opacity.</p></div>
<!-- /wp:cover -->

<!-- wp:paragraph {"align":"center"} -->
<p style="text-align:center">Make sure that all the text is readable.</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2008/06/dsc03149.jpg","align":"wide","id":758} -->
<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(http://luxury.test/wp-content/uploads/2008/06/dsc03149.jpg)"><p class="wp-block-cover-text">Our last cover image block has a wide width.</p></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov","align":"wide","id":1800,"backgroundType":"video"} -->
<div class="wp-block-cover has-background-dim alignwide"><video class="wp-block-cover__video-background" autoplay muted loop src="http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><p class="wp-block-cover-text">This is a wide cover block with a video background.</p></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov","align":"center","id":1800,"backgroundType":"video"} -->
<div class="wp-block-cover has-background-dim aligncenter"><video class="wp-block-cover__video-background" autoplay muted loop src="http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><p class="wp-block-cover-text">Compare the video and image blocks.<br>This block is centered.</p></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p>The block below has no alignment, and the text is a link. Overlay colors must also work with video backgrounds.</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"url":"http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov","id":1800,"dimRatio":60,"customOverlayColor":"#f4399d","backgroundType":"video"} -->
<div class="wp-block-cover has-background-dim-60 has-background-dim" style="background-color:#f4399d"><video class="wp-block-cover__video-background" autoplay muted loop src="http://luxury.test/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video><p class="wp-block-cover-text"><a href="https://wordpress.org/gutenberg/">This page needed more pink</a>. </p></div>
<!-- /wp:cover -->