[csswg-drafts] [css-backgrounds-4] Background origin for x and y axes

• From: Stanislav Lashmanov via GitHub <sysbot+gh@w3.org>
• Date: Mon, 12 Nov 2018 21:01:59 +0000
• To: public-css-archive@w3.org
• Message-ID: <issues.opened-379950744-1542056519-sysbot+gh@w3.org>

CyberAP has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds-4] Background origin for x and y axes ==
It would be useful to have `background-origin-x` and `background-origin-y` properties, similarly to `background-position-x` and `background-position-y`.

Consider this example:

```html
<input class="with-icon">
```

```css
input
{
  padding: 20px;
}

/* old way */
.with-icon
{
  padding-left: 40px; /* icon will be placed within this left padding */
  background: no-repeat 14px 50%/auto 60% url('image.svg'); /* icon size has magic numbers */
}

/* new way */
.with-icon
{
  padding-left: 40px;
  background: no-repeat 14px 50%/auto contain url('image.svg'); /* icon size is relative to content area of the input */
  background-origin-y: content-box;
}
```

We can't use simply `background-origin` here, because the background position of the icon would we within the content boundaries of the input, and thus would require to have negative numbers.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3312 using your GitHub account

Received on Monday, 12 November 2018 21:02:01 UTC