- From: jsnkuhn via GitHub <noreply@w3.org>
- Date: Mon, 09 Feb 2026 17:02:06 +0000
- To: public-css-archive@w3.org
A front end masters article talking about something very similar to the `@image` idea but accomplishing it through a `<foreignObject>` tag inside an inline svg as background-image.
https://frontendmasters.com/blog/background-patterns-with-css-corner-radius/
```css
.pattern {
width: 150px;
aspect-ratio: 1;
background-size: 50px 50px;
background-position:left 10px top 10px;
background-repeat: repeat;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='30px' height='100%'><div xmlns='http://www.w3.org/1999/xhtml' style='background:deepskyblue;width:90%;aspect-ratio:1;corner-shape:superellipse(-1);border-radius:30%;'></div></foreignObject></svg>");
background-color: ghostwhite;
/* etc. */
}
```
--
GitHub Notification of comment by jsnkuhn
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-3872869135 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 9 February 2026 17:02:07 UTC