An alternative to creating shapes out of background images in containers?

Hi Jessica,

ALT tag is a HTML attribute while the background-image is a CSS property which is complete different property.

CSS background image should not need ALT text, if you think a specific image needs to have ALT text, then you should be using image block instead of a background image. Hope that make sense :)

More info: https://accessibleweb.com/question-answer/add-alt-text-background-images/

Thanks so much Ying! That link was helpful too. My only other question is if there's a better way to do this than having these images be background images -- is there a way to style an image block (through GP or GB) to have curved edges, border, etc., or is this way I'm doing it the best way? Thanks!

Hi Jessica,

If you would like to style an Image Block, you can do it through custom CSS. An effective way to style it is through clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

For instance, you can set a custom class my-image-shape for the Image Block as such: https://share.getcloudapp.com/jkuv6dR7

Then, add a code like this in Appearance > Customize > Additional CSS:

figure.wp-block-image.my-image-shape img {
    clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
}

Here is what it would look like: https://share.getcloudapp.com/9ZumLlKm

Source: https://stackoverflow.com/questions/61157568/create-clip-path-wave-css-edges

Other clipping tools: https://bennettfeely.com/clippy/

Hope this helps! :)

Awesome, thanks Fernando! Good to know there's a solution but that I'm not missing a super simple one built-in. Thanks all!

You’re welcome Jessica! The way I provided alters the image itself, however, if you want an in-built workaround(though it doesn’t alter the image itself), you can place an Image Block inside a Container Block, and add a shape through the Block settings.

See: https://share.getcloudapp.com/d5u9J55x

Also see: https://share.getcloudapp.com/mXuYvX4O

In essence, there is shape on top of the image from the Container making it look like the image is clipped. Through this way, there would still be an Image Block as opposed to a Background image.

For example: https://share.getcloudapp.com/DOu4PYZW

Hope this clarifies. :)

Oh yes, that's perfect! Thanks for that solution, Fernando!

You’re welcome Jessica! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)