How to Flip Background Image Using CSS

How to flip background image using CSS?

I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

See example here http://jsfiddle.net/qngrf/807/

Flip horizontally only one background image

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><a href="#">Foo</a>      </li>      <li><a href="#">Bar</a>      </li>      <li><a href="#">Foz</a>      </li>      <li><a href="#">Baz</a>      </li>    </ul>  </nav></header>

.bg-image {
  z-index: 100 !important;
  color: #f1eeeef9;
}

.bg-image:before {
    content:"";
    position: absolute;
    display: inline-block;
    z-index: -1;
    width:100%;
    height:80px;
    background:url('https://picsum.photos/600/80');
    transform:scaleX(-1);
    background-repeat: no-repeat;
    background-size: cover;
}

<section class="bg-image">
  <nav class=navbar>
    <h2>Navbar</h2>
   </nav>
   <div class="row">
    .....
    </div>
 </section>