WordPress Gutenberg Cover Block: How to stop the Background Image Cropping on Mobile Devices

Introduction

WordPress Gutenberg blocks have made designing beautiful and functional web pages easier than ever. One popular block, the Cover block, allows users to add engaging full-width images and videos as backgrounds with overlaid text. In this article, we will explore the CSS background-size: cover setting, its origin, and how to prevent background images from cropping on mobile devices.

The Origins of background-size: cover

The background-size: cover setting was introduced in the CSS3 specification, which was officially published as a W3C recommendation on June 19, 2012. This new property allowed developers to easily control the scaling of background images to fit various container sizes and screen resolutions.

The primary purpose of this setting was to create a more visually appealing and dynamic user experience. With background-size: cover, background images automatically scale and resize to fill the entire container while maintaining their aspect ratio, ensuring that no whitespace is left in the background.

Understanding Image Cropping on Mobile Devices

When a background image is set to cover, it may appear cropped on mobile devices. This is because the image is scaled to fill the entire container while maintaining its aspect ratio. As a result, the image is often larger than the container, and any part of the image that extends beyond the container’s bounds is not visible. This is especially common on mobile devices, where screen sizes are smaller and more likely to cause cropping.

Preventing Image Cropping on Mobile Devices

To prevent background images from cropping on mobile devices, you can use CSS media queries to apply different styles based on the device’s screen size.

This uses the padding-top property to maintain the aspect ratio of the background image.

1. Add a custom CSS class to your Gutenberg cover block, e.g., “custom-cover-image,” as mentioned in the previous responses.
2. Next, add the following custom CSS to your site:

.custom-cover-image {
    /* Remove the default height set by the Gutenberg cover block */
    min-height: 0 !important;
    height: auto;
}

/* Maintain the aspect ratio of the background image */
.custom-cover-image::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* Adjust this value based on your image's aspect ratio (e.g., 16:9 -> 56.25%) */
}

/* Mobile devices (portrait and landscape) */
@media only screen and (max-width: 767px) {
    .custom-cover-image img.wp-block-cover__image-background {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
    }

    .custom-cover-image .wp-block-cover__inner-container {
        /* Center align the content */
        text-align: center;
        /* Position the inner container on top of the background image */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

This CSS code snippet uses the ::before pseudo-element with padding-top to maintain the aspect ratio of the background image. Adjust the padding-top value based on your image’s aspect ratio. The media query ensures that these styles are only applied on smaller screens (mobile devices).

Please note that this workaround may not work perfectly for all cases, as it relies on a fixed aspect ratio value. If you have multiple cover blocks with different background image aspect ratios, you’ll need to create custom CSS classes with different padding-top values for each aspect ratio.

Conclusion

The WordPress Gutenberg Cover block, combined with the CSS background-size: cover setting, allows developers to create visually engaging and dynamic web pages.

However, it’s important to consider the potential for image cropping on mobile devices.

By using CSS media queries and adjusting the background-size and background-position properties, you can prevent image cropping on mobile devices and ensure a consistent user experience across various screen sizes.