<style type="text/css">
#d_backgroundsize1 {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:200px 200px;
width:200px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize1a {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:200px;
width:200px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize1b {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:200px auto;
width:200px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize2 {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:100% 100%;
width:100px; height:100px;
color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize2a {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:100% 50%;
width:100px; height:100px;
color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize2b {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:50% 100%;
width:100px; height:100px;
color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize3 {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:contain;
width:200px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize3a {
background:#000 url(/content/img/krispykremedoughnuts.jpg) repeat center center;
background-size:contain;
width:300px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize4 {
background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
background-size:cover;
width:200px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
#d_backgroundsize4a {
background:#000 url(/content/img/krispykremedoughnuts.jpg) repeat center center;
background-size:cover;
width:300px; height:200px;
color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
</style>
<div class="cf">
<div id="d_backgroundsize1">200px 200px</div>
<div id="d_backgroundsize1a">200px</div>
<div id="d_backgroundsize1b">200px auto</div>
</div>
<div class="cf">
<div id="d_backgroundsize2">100% 100%</div>
<div id="d_backgroundsize2a">100% 50%</div>
<div id="d_backgroundsize2b">50% 100%</div>
</div>
<div class="cf">
<div id="d_backgroundsize3">contain</div>
<div id="d_backgroundsize3a">contain - repeat</div>
</div>
<div class="cf">
<div id="d_backgroundsize4">cover</div>
<div id="d_backgroundsize4a">cover - repeat</div>
</div>