Hi @junvalentia
If you absolutely want to use a cover block, you’ll indeed have to set specific settings and add custom CSS code. In particular, you’ll have to remove the full height property from the block (since you cannot force the image to be full-height and full-width without distorting it obviously) and add a custom class to the cover block, such as pittan-custom-cover. Then, add the following CSS snippet to ensure the full image is visible:
.pittan-custom-cover {
aspect-ratio: 1.92 !important;
}
Please note that the value 1.92 is specific to your current image. If you switch to a different image, you’ll need to adjust this value accordingly.
However, I would recommend using a regular image block instead of a cover block. This approach won’t require custom CSS and should better meet your needs.
- Just add a regular image block and select your image from the Media Library.
- Then, set it to full-width.
If you want to have a full-height effect, you can:
- insert the image block into a group block,
- set the background color of the group block to match the image (almost black),
- arrange the group block horizontally (as a row),
- and finally, set its minimum height to 100vh (100vh is full-height but you can customized the height as you want).
Here is an example that you can copy and paste directly into your page:
<!-- wp:group {"align":"full","style":{"dimensions":{"minHeight":"100vh"},"color":{"background":"#040406"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#040406;min-height:100vh"><!-- wp:image {"id":503,"sizeSlug":"full","linkDestination":"none","align":"full"} -->
<figure class="wp-block-image alignfull size-full"><img src="https://pittanmusic.com/wp-content/uploads/2024/06/crop-0-0-2560-1333-0-big-comp_2-expanded-scaled.jpg" alt="" class="wp-image-503"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
I hope this helps. Feel free to ask if you have any questions.
