Растягиваем background без использования img в разметке

в интернете много решений проблемы, когда нам надо растянуть фон на весь экран (именно растянуть а не замостить) и все решения крутятся вокруг картинки которую размещают абсолютом под контентом и растягивают задавая ей размеры яваскриптом или просто размеры наследуются от боди (width:100%; height:100%;). Но вот недавно мне понадобилось сделать кнопки у которых фон в виде градиента идущего наискосок.
Первая мысль была просто сделать большую картинку и позиционировать её по центру. Кнопки всё равно небольшие, и мало кто-бы заметил.
Вторая мысль — через canvas/vml но как-то было лень.
Третья мысль — яваскриптом добавлять картинку - тоже лень.
Четвертая бредовая — есть в MSIE фильтр AlphaImageLoader и у него есть свойство sizingMethod, и если присвоить ему "scale" будет растягивать картинку... стоп для MSIE у нас уже есть готовое решение... дело за малым, придумать что-то для остальных браузеров, есть надежда на CSS3. И не зря
Нам поможет background-size. background-size — масштабирует бекграунд согласно заданным размерам.
Можно указывать ширину и высоту в еденицах или процентах.
auto по умолчанию и ничего не делает, если указан и у ширины и у высоты,
если указан размер одной стороны а у второй auto то картинка маcштабируется пропорционально.
cover — масштабирует бекграунд с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. (не работает в Webkit и в Opera )
contain — масштабирует бекграунд с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. (неработает в Webkit и в Opera )
Более подробно можно прочитать MDC, там же можно глянуть и примеры.
Мой рабочий пример где можно проверить работу в MSIE и других.
код примера:

<style type="text/css">
html, body { height:100%; width:100%; margin:0; padding:0; }
body {
background-image:url(images/bg.jpg);
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-khtml-background-size:100% 100%;
background-size:100% 100%;
}
.text {
width:50%;
padding:30px;
text-align:center;
font: 18px Lucida Sans Unicode, Lucida Grande, sans-serif;
color:383838;
}
img {
padding:10px;
background:#707070;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
body {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/examples/images/bg.jpg', sizingMethod='scale');
background-image:none;
}
</style>
<![endif]-->