CSS3 background-position

use css3 background position offset from right and bottom where possible and use % as fall back for firefox and safari and chrome.

by stofke

HTML

If the Firefox logo is at the top left corner, your browser doesn't support the CSS3 background-position. If it's closer to the bottom right, it does.

CSS

html { background: white }

body {
    width: 300px;
    height: 200px;
    background: #333 url(http://mozcom-cdn.mozilla.net/img/home/download-logo.png) no-repeat;
    background-position: 93% 87%;     /* will be overwritten by supporting browsers like Opera */
    background-position: bottom 15px right 15px; /* ignored by non-supporting browsers like webkit-based browsers */
    color:white;
    font-family: sans-serif;
    font-weight:bold;
    text-shadow: .05em .05em .1em black;
}