W3C home > Mailing lists > Public > www-style@w3.org > June 2012

RE: [css4-background] background-position-x and background-position-y or logical directions

From: Brian Manthos <brianman@microsoft.com>
Date: Tue, 26 Jun 2012 21:37:30 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, fantasai <fantasai.lists@inkedblade.net>
CC: Florian Rivoal <florianr@opera.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <4031779A10373C4AB7B9FBAD218A8BAC0C00296C@CH1PRD0310MB391.namprd03.prod.outlook.com>
Tab Atkins:
> The only use-case I've ever seen for background-position-x/y is image spriting

Another use-case is animating along one axis.

    <meta http-equiv="X-UA-Compatible" content="IE=10" />
	html {
		background-color: black;
		color: yellow;
	.stockphoto {
		width: 300px;
		height: 240px;
		background-image: url("http://ts2.mm.bing.net/th?id=I4652627029067941&pid=1.5");
		border: 1px solid white;
	.pulseblack {
		width: 64px;
		height: 14px;
		background-color: black;
		border-radius: 40%;
		position: relative;
		left: 122px;
		top: 103px;

	@keyframes KITT {
		from { background-position-x: -30px; }
		to { background-position-x: 30px; }
	.pulsered {
		background-image: linear-gradient(to right, transparent, red 50%, transparent);
		background-image: radial-gradient(red, transparent 75%);
		width: 100%;
		height: 100%;
		background-position: 0px 4px;
		background-repeat: no-repeat;
		background-size: 100% 5px;
		animation-name: KITT;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		animation-duration: 1s;
<div class="stockphoto">
<div class="pulseblack">
<div class="pulsered">
Received on Tuesday, 26 June 2012 21:38:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:00 UTC