Html + Css: How to create a auto-resizing rotated background?

Posted by Sebastian P.R. Gingter on Stack Overflow See other posts from Stack Overflow or by Sebastian P.R. Gingter
Published on 2011-03-05T14:23:00Z Indexed on 2011/03/05 15:25 UTC
Read the original article Hit count: 174

Filed under:

html5

|

style

|

css3

|

rotation

Hi,

image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise). This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.

Actually this can be done with some css and it's working quite well (except for IE).

The real problem now is: I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.

Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.

How can I realize that? Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.

© Stack Overflow or respective owner

Related posts about html5

Is there a HTML5 Validator plugin for Firefox?

as seen on Super User - Search for 'Super User'
Is there a plugin for firefox to validate HTML 5? I've always used this but if my webpage has a <!DOCTYPE HTML> doctype it complains about it not having a doctype at all. >>> More
HTML5 video tag in chrome - wmv

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Al, I need to make a page which displays a video. Firefox and and Opera support the OGG format, no problem there. Chrome is ... "stupid" and does not recognize OGG. Does Chrome on Windows know how to handle WMV? I already have them encoded, and no I cannot recode new videos since the media is… >>> More
HTML5 cache manifest: whitelisting ALL remote resources?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm doing an iPhone version of a desktop site that includes a blog. The blog often embeds images from other domains (the image URLs always start with http:// in this case, obviously), but because I'm using cache-manifest, these images don't load because they aren't declared in the manifest file. I… >>> More
Learning HTML5 - Sample Sites

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Part of the challenge with HTML5 is understanding the range of different technologies and finding good samples. The following are some of the sites I have found most useful. IE TestDrive http://ie.microsoft.com/testdrive/ A good set of demos using touch, appcache, IndexDB, etc… >>> More
Online video tutorials for HTML 5

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Here are some of the best introductory HTML5 videos I have found online/for free. Mix 2011: HTML5 for Skeptics - Scott Stansfield channel9.msdn.com/Events/MIX/MIX11/EXT21 Filling the HTML5 Gaps with Polyfills and Shims - Ray Bango channel9.msdn.com/Events/MIX/MIX11/HTM04 50 Performance… >>> More

Related posts about style

Planning Database as a Service Implementation Project

as seen on Oracle Blogs - Search for 'Oracle Blogs'
People, process and planning are the three key elements to success in a private cloud journey. Some common questions i hear from field/customers often relates to tasks involved in setting up Database-as-a-Service(DBaaS) using Oracle Enterprise Manager 12c from scratch and how these tasks are mapped… >>> More
Oracle bleibt auch 2011 Spitzenreiter im Bereich Datenbanken

as seen on Oracle Blogs - Search for 'Oracle Blogs'
Mit der Veröffentlichung der aktuellen Ausgabe "Market Share: All Software Markets, Worldwide 2011" bestätigt das weltweit führende Marktanalyseunternehmen Gartner Oracle's Marktführerschaft im Bereich der Relationellen Datenbank Management Systeme (RDBMS). Oracle konnte innerhalb des letzten… >>> More
#include file vs iframe or is there a better way

as seen on Stack Overflow - Search for 'Stack Overflow'
ok simple question about including large mostly static html and asp.net code I am using as of right now #include and I was wondering if iframes would be a better way of handling what I wish to do or is there a better way to do it. here is the current way i'm handling the includes default.aspx … >>> More
What is wrong with my gtkrc file?

as seen on Stack Overflow - Search for 'Stack Overflow'
I have written following gtkrc file from some other theme gtkrc file. This theme is normal theme with buttons using pixmap theme engine. I have also given background image to GtkEntry. Problem is that, When i use this theme my buttons doesn't show text one them and my entry box does not show cursor… >>> More
GWT theme style overrides my css style

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application. The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless… >>> More