How to flip background image using CSS?


Tags: css,css3,mobile-webkit

Problem :

How to flip any background image using CSS? Is it possible?

currenty I'm using this arrow image in a background-image of li in css

enter image description here

On :visited I need to flip this arrow horizontally. I can do this to make another image of arrow BUT I'm just curious to know is it possible to flip the image in CSS for :visited



Solution :

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/


    CSS Howto..

    Bootstrap: How to get part of my banner image to hide under my sidebar?

    How can a directory/folder name affect page rendering?

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    How can I make a div 100% of the browser window height, but with a top and bottom margin?

    How do I select every other div class element using just CSS (no js)

    how can style be added to the first 2 list elements using CSS

    Scroll Bar not Fully show the value In Div

    How to get just one parameter in 'clip' CSS property using JQuery? [duplicate]

    How does CSS handle specificity tie?

    How does one make one table column header taller than the rest?

    How to achieve this awesome CSS animation

    How to vertically center text overlapping an image?

    How to apply css to top level element only

    How to enforce a min-width for a page (css)

    CSS: how to position element in lower right?

    How do I make the box smaller in html?

    Show/hide
  • by jQuery
  • how to format a single html a href text to have multiple css properties (two different font families)

    How to set div width to the width of the table in it?

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How to apply styles to neighboring elements in a list

    Div doesn´t show background color after float:left

    How to get similar style as JQuery UI website itself

    How do i prevent my CSS affecting external plugins?

    How to target a group of long similar CSS selectors on one line?

    How to divide content with CSS even, odd?

    How can I set the body color of a web page to the current width and height of the monitor?

    How to wrap image around the long text?

    how to add background images using css in phonegap