Skip to content

Cover Block: use <img> instead of background-image #17463

@tomaszpoliszuk

Description

@tomaszpoliszuk

Is your feature request related to a problem? Please describe.
right now Cover Block uses background-image which is not ideal solution (one image size to all devices)

Describe the solution you'd like
instead of using background-image it could use <img> element with srcset and additional styles (example, .wp-block-cover__image is <img> element):
.wp-block-cover { position: relative; }
.wp-block-cover__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
possibly with option to alter sizes attribute

Describe alternatives you've considered
Removing Cover block and replacing it with custom made one.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] CoverAffects the Cover Block - used to display content laid over a background image

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions