Background types

by Vladimir

HTML

<div id="wrapper">
    <h2>placekitten</h2>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
    <p>A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code</p>
    <p>Just put your image size (width & height) after our URL and you'll get a placeholder.</p>
</div>
<div class="tab">
<input type="radio" name="tpe" value="center" checked="checked" />По центру 
<input type="radio" name="tpe" value="tile" />Замостить<br />
<input type="radio" name="tpe" value="size" />По размеру 
    <input...

CSS

body {
    background-image: url(http://lorempixel.com/output/nature-q-c-1920-1096-6.jpg);
    margin:0;
    width:100%;
    background-attachment: fixed;
}
#wrapper {
    width:60%;
    margin: 0 auto;
    background: rgba(190,190,190, 0.8);
    overflow:hidden;
    padding: 30px;
}
.center {
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: 50% 50%;
}
.tile {
    background-repeat: repeat;
    background-image: url(http://lorempixel.com/output/nature-q-c-100-100-10.jpg);
}
.size {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 100% auto;
}
.fill {
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 0;
}
.enlarge {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.tab {
    position: fixed;
    bottom:0;
    width:400px;
    background: rgba(255,255,255,0.9);
    left: 50%;
    margin: 0 0 0 -200px;
    padding: 30px;
}

JavaScript

$('body').addClass('center');
$('[name="tpe"]').change(function() { 
    $('body').removeClass().addClass($(this).val());
});