W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2018

[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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:39 UTC