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);
}