Flip horizontally only one background image - css

Question

I have a header with two background images (one at each side). This way:
HTML:
<header>
...
</header>
CSS:
header {
...
background-image: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
}
...
See jsfiddle.
For now I use two pictures and, as both pictures are identical but flipped horizontally, I want to use only one picture and use CSS to flip the other picture. To save some bandwidth...
On the web I found that I can use transform: scaleX(-1); to do the flip. But how to apply it at only one background image?

Answer 1

demo - http://jsfiddle.net/q1rf735s/1/
instead use pseudo element :before and :after
header {
width: 500px;
height: 50px;
display: inline-block;
}
header:before,
header:after {
content: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
display: block;
float: left;
}
header:after {
transform: scaleX(-1);
}
header ul {
margin: 0 50px;
padding: 0;
list-style: none;
}
header li {
float: left;
}
header a {
width: 100px;
height: 33px;
padding-top: 17px;
display: block;
text-align: center;
text-decoration: none;
color: #333;
}
<header>
<nav>
<ul>
<li>Foo
</li>
<li>Bar
</li>
<li>Foz
</li>
<li>Baz
</li>
</ul>
</nav>
</header>