Hi,
Is there any way to flip a - "ONE" - background image horizontally via CSS? From my tiresome search I came up with out luck, if its not possible with css then can this be done with JavaScript?
Thanks in advance![]()
| SitePoint Sponsor |

Hi,
Is there any way to flip a - "ONE" - background image horizontally via CSS? From my tiresome search I came up with out luck, if its not possible with css then can this be done with JavaScript?
Thanks in advance![]()
This can't be done with CSS2.1 or JavaScript.
IE/Win might have some proprietary way to do it though.
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Sorry, this can't be done. All CSS can do is place a background image.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns

Was afraid of this, then can non-background image i.e a simple image on a page be manipulated css, js or even via php?


Just a stupid question here, are you trying to change the appearance when you hover over the image or its container?
(And no, PHP won't help in this case.)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns


Isn't ImageMagick for that? (PHP)
/EDIT: I mean, for transforming images

Well I have lot of headers and footer bars (images) over 20 but three main types for a forum like application I'm making for a client, unfortunately a single top header is 12kb so top headers alone is 36kb and then the footers are the same as the headers but just horizontally inversed/flipped. You see if i can some how flip the images then I need tot add an additional 36kb by putting in the footer images.
Hope I'm not being vague.![]()


I think you'd be better off going with separate images then. Just make sure that the size of the images don't present a problem when compared to the number of separate HTTP requests the browser will have to make.
I know of a site (www.classicbattletech.com) that had the same problem. I understand it's in the process of being redesigned (slightly) with leaner code and better image optimization in mind.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns


I think different images is the best way to do it, using PHP you might flip your images but they'll be received as different ones by the user, so it's a harder way to achieve the same.
Bookmarks