Фоновые изображения - взаимод. с рамками

by pharma_nsk

HTML

<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>

CSS

.box1, .box2, .box3, .box4, .box5{
  display:inline-block;
  width:200px;
  height:200px;
  border:5px dashed grey;
  margin-bottom:5px;
  padding:10px;
}
.box1 {
  background: blue url("https://pp.vk.me/c408116/v408116009/b7c/mozoGYh-F2s.jpg") no-repeat;
}
.box2 {
  background: blue url("https://pp.vk.me/c408116/v408116009/b7c/mozoGYh-F2s.jpg") no-repeat;
  background-clip: padding-box; /* background-clip определяет площадь поверхности, которую охватывает фоновое изображение */
}
.box3 {
  background: blue url("https://pp.vk.me/c408116/v408116009/b7c/mozoGYh-F2s.jpg") no-repeat;
  background-size: cover;
  background-origin: content-box; /* свойство background-origin определяет, откуда должно начинаться background-position */
}
.box4 {
  background: blue url("https://pp.vk.me/c408116/v408116009/b7c/mozoGYh-F2s.jpg") no-repeat;
  background-origin: border-box;
  background-size: cover;
}
.box5 {
  background: blue url("https://pp.vk.me/c408116/v408116009/b7c/mozoGYh-F2s.jpg") no-repeat;
  background-clip: padding-box;
  background-origin: content-box;
}