If you’re using large, high-quality images in WordPress but noticing blurriness or pixelation, the solution may lie in how Cover blocks process images. Here’s a closer look at why this happens, and how I solved it by refining the Cover block code.

The Problem: Blurry Images on High-Resolution Displays

The initial problem was straightforward: even with a high-res image uploaded at 1920×1080, WordPress was serving a scaled-down version, resulting in pixelation on screens with higher resolutions. Here was my setup:

• Image Resolution: 1920×1080
• Screen Resolution: 2048×1280
• Cover Block Layout: Full-width, covering 100% of the viewport height

At this size, WordPress stretched the image, and pixelation became noticeable.

Why This Happens: WordPress and Image Scaling in Cover Blocks

By default, WordPress optimizes images by serving a scaled version, often relying on the “Large” size setting, which isn’t always adequate for full-width, high-res screens. WordPress also wraps the Cover block image in an <img> tag, limiting how well it can scale beyond its max dimensions.

Original Cover Block Code

In the original setup, the image is displayed via an <img> tag, relying on WordPress’s image size scaling. Here’s what it looked like:

<!-- wp:cover {"url":"https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg","id":198,"dimRatio":0,"customOverlayColor":"#6293c0","minHeight":100,"minHeightUnit":"vh","isDark":false,"layout":{"type":"constrained"}} -->

<div class="wp-block-cover is-light" style="min-height:100vh">

    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#6293c0"></span>

    <img class="wp-block-cover__image-background wp-image-198" alt="" src="https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg" data-object-fit="cover"/>

    <div class="wp-block-cover__inner-container">

        <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->

        <p class="has-text-align-center has-large-font-size"></p>

        <!-- /wp:paragraph -->

    </div>

</div>

<!-- /wp:cover -->

In this setup, WordPress prioritizes its optimized size rather than the full quality image, limiting sharpness on larger displays.

The Solution: Use background-image for Sharp, Responsive Coverage

To fix this, I replaced the <img> tag with a CSS background-image, which scales more effectively across display sizes. Here’s the updated code:

<!-- wp:cover {"url":"https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg","dimRatio":0,"customOverlayColor":"#6293c0","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"center","layout":{"type":"default"}} -->

<div class="wp-block-cover aligncenter is-light" style="min-height:100vh; background-image: url('https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg'); background-size: cover; background-position: center;">

    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#6293c0"></span>

    <div class="wp-block-cover__inner-container">

        <!-- wp:paragraph {"align":"center","fontSize":"large"} -->

        <p class="has-text-align-center has-large-font-size"></p>

        <!-- /wp:paragraph -->

    </div>

</div>

<!-- /wp:cover -->

With this updated code in place, the Cover block now displays the image as a background-image, which maintains sharpness and clarity across all screen sizes. Below, you can see how the image looks with this approach, appearing clear and well-proportioned without any pixelation, even on high-resolution displays. This method offers a seamless visual experience that better showcases high-quality images.

Why This Fix Works

Using background-image gives the Cover block better scaling and resolution options, avoiding WordPress’s predefined image dimensions. This approach, paired with background-size: cover; and background-position: center;, ensures the image fills the entire viewport without sacrificing quality on larger displays.

Conclusion

Want to enhance the visual quality of your WordPress site? Try implementing this background-image solution today! Share your results or any questions you have in the comments below, and let’s elevate your image game together!