background-size:
background-position:
background-origin:
background-clip:
画面の幅を変更(960px未満)すると違いがわかりやすいかもしれません。背景画像のサイズは 960px X 640px です。
<body> <div id="wrapper"> <div id="sample"></div> </div> </body>
wrapper { max-width: 960px; margin: 50px auto; } * { box-sizing: border-box; } #sample{ width:100%; background-color:#ddd; background-position: left top; height: 400px; background-image: url(../images/css/css3_bg03.jpg); background-repeat:no-repeat; background-size: cover; color: #fff; padding: 20px; border: 20px solid hsla(220,82%,77%,0.3); }