layout background 03

layout background 03

by Boba Poshtar

HTML

<div>default</div>
<div class="bg1">cover</div>
<div class="bg2">contain</div>
<div class="bg3">100px</div>
<div class="bg4">200px 50px</div>
<div class="bg5">100px auto</div>
<div class="bg6">50%</div>
<div class="bg7">50% 220%</div>

CSS

div {
  width: 300px; height: 150px; margin: 0 0 16px;
  background: url(https://poshtarboba.github.io/fe/img/cat_bg.jpg) no-repeat left top;
  border: 1px solid rgba(255, 0, 0, 1);
}
.bg1 { background-size: cover; }
.bg2 { background-size: contain; }
.bg3 { background-size: 100px; }
.bg4 { background-size: 200px 50px; }
.bg5 { background-size: 100px auto; }
.bg6 { background-size: 50%; }
.bg7 { background-size: 50% 220%; }