Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Improve README and demo

  • Loading branch information...
commit 19d900e32413533524c0beb29a358d7220bc5981 1 parent ef5fa68
Louis-Rémi Babé authored
Showing with 116 additions and 14 deletions.
  1. +72 −3 README.md
  2. +44 −11 index.html
75 README.md
View
@@ -1,4 +1,73 @@
-background-size-polyfill
-========================
+backgrouund-size polyfill
+=========================
-Adds support for background-size "cover" and "contain" to IE8
+An IE behavior adding support for `background-size: cover;` and `background-size: contain;` to IE8.
+
+**[Demo](http://louisremi.github.com/background-size-polyfill/)**
+
+Introduction
+------------
+
+**Progressive Enhancement** is the mantra I live by. It means *"Have fun with CSS3 and don't worry about IE8 users; they'll never notice they're missing out on your gorgeous text-shadows and gradients, anyway"*.
+
+All was well until I discovered the elegance of `background-size: cover;` and `background-size: contain;`.
+The first one, for instance, allows an image to completely cover a background,
+**without** having to send a 1920x1080 background image down the pipes.
+
+Unfortunately, they don't degrade gracefully: websites would likely appear broken to IE8 users :-(
+...unless you use this behavior!
+
+How to use it?
+-----------------
+
+Everywhere you use `background-size: cover;` or `background-size: contain;` in your CSS, add a reference to this script.
+
+```css
+.selector {
+ background-size: cover;
+ -ms-behavior: url(http://louisremi.github.com/background-size-polyfill/backgroundsize.min.htc);
+}
+```
+The elements targeted by this plugin should have a `position: relative;` or `position: fixed;` and a z-index.
+If not, they will be given a `position: relative;` and `z-index: 0;`.
+
+Limitations
+-----------
+
+This polyfill inserts an `<img/>` in the background of all elements matched in the css to emulate the `cover` or `contain` value.
+Calculating the displayed position and size of this image is quite complex and function of numerous parameters:
+- the size of the element itself
+- the size of the image
+- the values of background-[size/position/clip/origin/attachment/scroll]
+
+It is thus impossible to emulate `background-size` completely and perfectly. But it's still possible to enjoy the main features:
+- correct position and size of the background image
+- updated position and size on browser resize
+- updated image, position and size when the background-image is modified
+
+The following style properties, values or behavior aren't supported:
+- values other than `cover` or `contain` in `background-size`
+- multiple backgrounds (although the :after trick can still be used)
+- 4 values syntax of `background-position`
+- lengths (px, em, etc.) in `background-position` (only percentages and keywords such as `center` work)
+- any `repeat` value in `background-repeat`
+- non-default values of background-[clip/origin/attachment/scroll]
+- resizing the background when the dimensions of the element change
+
+Removing any of these limitations is probably just one fork away...
+
+Self-hosting
+------------
+
+When deploying this solution on production environment, you should switch to a self-hosted version of the file.
+You will need to configure your server to send appropriate `text/x-component` headers along with it.
+With Apache you can do this by adding the following line to an .htaccess file: `AddType text/x-component .htc`.
+With NodeJS you can use the node-mime module which already recognizes that extension.
+
+License
+-----------------
+
+MIT Licensed http://louisremi.mit-license.org/, by [@louis_remi](http://twitter.com/louis_remi)
+
+Are you using this in a paid work?
+Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
55 index.html
View
@@ -1,6 +1,7 @@
<!doctype html>
<html>
<head>
+<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<style>
/* set the background of the body */
body {
@@ -28,13 +29,16 @@
/* responsive carousel FTW */
#carousel {
- height: 50%;
+ height: 45%;
width: 50%;
margin: 0 auto;
+ background: #0F0808;
+ border-radius: 3px;
}
#carousel ul {
height: 100%;
padding: 0;
+ margin: 0;
list-style: none;
}
#carousel li {
@@ -58,22 +62,48 @@
}
h1 {
- font-family: "Arial Narrow", "Liberation Sans Narrow", sans-serif;
+ font-family: 'Great Vibes', sans-serif;
+ text-align: center;
+ margin: 0 0 40px;
+ text-shadow: 0 0 2px #222;
+ font-size: 1.7em;
font-weight: normal;
- font-size: 2.2em;
+ position: relative;
+ top: 20px;
+}
+
+h1 i {
+ font-size: 1.3em;
+ display: block;
+ -moz-transform: rotate(-15deg);
+ -webkit-transform: rotate(-15deg);
+ -o-transform: rotate(-15deg);
+ -ms-transform: rotate(-15deg);
+ transform: rotate(-15deg);
+}
+
+p {
text-align: center;
- margin-top: 0;
- padding: 1em 0;
+ font-size: 1.5em;
+
+ text-shadow: 0 0 2px #222;
}
-h1 a {
- cursor: pointer;
- text-decoration: underline;
+
+.button {
+ color: #0F0808;
+ text-decoration: none;
+ background: #FEE;
+ border-radius: 3px;
+ text-shadow: none;
+ padding: 4px 8px;
}
</style>
</head>
<body class="bgsCover">
-<h1><a id="switchImage">BACKGROUND</a>-<a id="switchSize">SIZE</a></h1>
+<h1><i>background-size</i> polyfill</h1>
+
+<a href="https://github.com/louisremi/background-size-polyfill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
<div id="carousel">
<ul>
@@ -84,9 +114,12 @@
</ul>
</div>
+<p>Bringing <code>background-size: cover;</code> and <code>background-size: contain;</code> to IE8.<br/>
+Reacts to resize events for responsive backgrounds and galeries!</p>
+<p><a class="button" href="https://github.com/louisremi/background-size-polyfill#readme">Instructions</a> - <a class="button" href="https://github.com/louisremi/background-size-polyfill/downloads">Downloads</a></p>
<script>
-var images = [
+/*var images = [
'algeria.jpg',
'parthenon.jpg',
'propylaea.jpg'
@@ -106,7 +139,7 @@
document.getElementById("switchSize").onclick = function() {
curSize = ( curSize + 1 ) % sizes.length;
document.body.className = "bgs" + sizes[ curSize ];
-};
+};*/
var items = document.querySelectorAll("#carousel li"),
curItem = 0;
Please sign in to comment.
Something went wrong with that request. Please try again.