<!DOCTYPE html>
<title>Tiled and scaled background with 'transform: scale(1, -1)'</title>
<style>
div {
width: 100px;
height: 100px;
}
#subject {
background-size: 95px 100px;
transform: scale(1, -1);
}
</style>
<div id=back>
<div id=subject></div>
</div>
<script>
function stripedImage(c1, c2) {
var c = document.createElement('canvas');
c.width = c.height = 100;
var ctx = c.getContext('2d');
ctx.fillStyle = c1;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = c2;
ctx.fillRect(0, 50, 100, 50);
return c.toDataURL('image/png');
}
document.getElementById('back').style.background = 'url(' + stripedImage('#080', '#f00') + ')';
document.getElementById('subject').style.backgroundImage = 'url(' + stripedImage('#080', 'transparent') + ')';
</script>